From f4991944d13b94355fb8aaf03dad7d60ca530ee9 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 30 Nov 2023 16:36:45 +0800
Subject: [PATCH] fix:是否修改
---
uni_modules/uview-ui/components/u-swiper/u-swiper.vue | 255 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 255 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-swiper/u-swiper.vue b/uni_modules/uview-ui/components/u-swiper/u-swiper.vue
new file mode 100644
index 0000000..0cfb229
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-swiper/u-swiper.vue
@@ -0,0 +1,255 @@
+<template>
+ <view
+ class="u-swiper"
+ :style="{
+ backgroundColor: bgColor,
+ height: $u.addUnit(height),
+ borderRadius: $u.addUnit(radius)
+ }"
+ >
+ <view
+ class="u-swiper__loading"
+ v-if="loading"
+ >
+ <u-loading-icon mode="circle"></u-loading-icon>
+ </view>
+ <swiper
+ v-else
+ class="u-swiper__wrapper"
+ :style="{
+ height: $u.addUnit(height),
+ }"
+ @change="change"
+ :circular="circular"
+ :interval="interval"
+ :duration="duration"
+ :autoplay="autoplay"
+ :current="current"
+ :currentItemId="currentItemId"
+ :previousMargin="$u.addUnit(previousMargin)"
+ :nextMargin="$u.addUnit(nextMargin)"
+ :acceleration="acceleration"
+ :displayMultipleItems="displayMultipleItems"
+ :easingFunction="easingFunction"
+ >
+ <swiper-item
+ class="u-swiper__wrapper__item"
+ v-for="(item, index) in list"
+ :key="index"
+ >
+ <view
+ class="u-swiper__wrapper__item__wrapper"
+ :style="[itemStyle(index)]"
+ >
+ <!-- ���nvue������image���������������������������������������������������flex:1��������������������������������������������������� -->
+ <image
+ class="u-swiper__wrapper__item__wrapper__image"
+ v-if="getItemType(item) === 'image'"
+ :src="getSource(item)"
+ :mode="imgMode"
+ @tap="clickHandler(index)"
+ :style="{
+ height: $u.addUnit(height),
+ borderRadius: $u.addUnit(radius)
+ }"
+ ></image>
+ <video
+ class="u-swiper__wrapper__item__wrapper__video"
+ v-if="getItemType(item) === 'video'"
+ :id="`video-${index}`"
+ :enable-progress-gesture="false"
+ :src="getSource(item)"
+ :poster="getPoster(item)"
+ :title="showTitle && $u.test.object(item) && item.title ? item.title : ''"
+ :style="{
+ height: $u.addUnit(height)
+ }"
+ controls
+ @tap="clickHandler(index)"
+ ></video>
+ <text
+ v-if="showTitle && $u.test.object(item) && item.title && $u.test.image(getSource(item))"
+ class="u-swiper__wrapper__item__wrapper__title u-line-1"
+ >{{ item.title }}</text>
+ </view>
+ </swiper-item>
+ </swiper>
+ <view class="u-swiper__indicator" :style="[$u.addStyle(indicatorStyle)]">
+ <slot name="indicator">
+ <u-swiper-indicator
+ v-if="!loading && indicator && !showTitle"
+ :indicatorActiveColor="indicatorActiveColor"
+ :indicatorInactiveColor="indicatorInactiveColor"
+ :length="list.length"
+ :current="currentIndex"
+ :indicatorMode="indicatorMode"
+ ></u-swiper-indicator>
+ </slot>
+ </view>
+ </view>
+</template>
+
+<script>
+ import props from './props.js';
+ /**
+ * Swiper ���������
+ * @description ���������������������������������������������������������,������������������
+ * @tutorial https://www.uviewui.com/components/swiper.html
+ * @property {Array} list ���������������
+ * @property {Boolean} indicator ������������������������������������ false ���
+ * @property {String} indicatorActiveColor ��������������������������������� '#FFFFFF' ���
+ * @property {String} indicatorInactiveColor ��������������������������������� 'rgba(255, 255, 255, 0.35)' ���
+ * @property {String | Object} indicatorStyle ���������������������������bottom���left���right������������
+ * @property {String} indicatorMode ������������������������ 'line' ���
+ * @property {Boolean} autoplay ��������������������������� true ���
+ * @property {String | Number} current ��������������������� index��������� 0 ���
+ * @property {String} currentItemId ��������������������� item-id ������������ current ���������������
+ * @property {String | Number} interval ���������������������������������ms������������ 3000 ���
+ * @property {String | Number} duration ���������������������������������ms������������ 300 ���
+ * @property {Boolean} circular ��������������������������������������������������� false ���
+ * @property {String | Number} previousMargin ������������������������������������������������������nvue������������������������������ 0 ���
+ * @property {String | Number} nextMargin ������������������������������������������������������nvue������������������������������ 0 ���
+ * @property {Boolean} acceleration ��������������������������������������������������������������������������������������� false ���
+ * @property {Number} displayMultipleItems ������������������������������nvue��������������������������������������� 1 ���
+ * @property {String} easingFunction ������swiper��������������������������� ������������������������������������ 'default' ���
+ * @property {String} keyName list������������������������������������������������ 'url' ���
+ * @property {String} imgMode ������������������������������ 'aspectFill' ���
+ * @property {String | Number} height ��������������������� 130 ���
+ * @property {String} bgColor ��������������������� '#f3f4f6' ���
+ * @property {String | Number} radius ������������������������������������������������������ 4 ���
+ * @property {Boolean} loading ������������������������ false ���
+ * @property {Boolean} showTitle ���������������������������������������������title��������������� false ���
+ * @event {Function(index)} click ������������������������ index���������������������������������0������
+ * @event {Function(index)} change ������������������������(������������������������) index������������������������������������0������
+ * @example <u-swiper :list="list4" keyName="url" :autoplay="false"></u-swiper>
+ */
+ export default {
+ name: 'u-swiper',
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+ data() {
+ return {
+ currentIndex: 0
+ }
+ },
+ watch: {
+ current(val, preVal) {
+ if(val === preVal) return;
+ this.currentIndex = val; // ������������������������
+ }
+ },
+ computed: {
+ itemStyle() {
+ return index => {
+ const style = {}
+ // #ifndef APP-NVUE || MP-TOUTIAO
+ // ������������������������������������nvue���������
+ // ������������������������������������������������������������������
+ if (this.nextMargin && this.previousMargin) {
+ style.borderRadius = uni.$u.addUnit(this.radius)
+ if (index !== this.currentIndex) style.transform = 'scale(0.92)'
+ }
+ // #endif
+ return style
+ }
+ }
+ },
+ methods: {
+ getItemType(item) {
+ if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
+ if (typeof item === 'object' && this.keyName) {
+ if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
+ if (item.type === 'image') return 'image'
+ if (item.type === 'video') return 'video'
+ return 'image'
+ }
+ },
+ // ������������������������������������������������������������������������������������������������������������keyName
+ getSource(item) {
+ if (typeof item === 'string') return item
+ if (typeof item === 'object' && this.keyName) return item[this.keyName]
+ else uni.$u.error('������������������������������')
+ return ''
+ },
+ // ������������������
+ change(e) {
+ // ���������������������
+ const {
+ current
+ } = e.detail
+ this.pauseVideo(this.currentIndex)
+ this.currentIndex = current
+ this.$emit('change', e.detail)
+ },
+ // ������������������������������������
+ pauseVideo(index) {
+ const lastItem = this.getSource(this.list[index])
+ if (uni.$u.test.video(lastItem)) {
+ // ���������������������������������
+ const video = uni.createVideoContext(`video-${index}`, this)
+ video.pause()
+ }
+ },
+ // ���������������item���������������������������������������
+ getPoster(item) {
+ return typeof item === 'object' && item.poster ? item.poster : ''
+ },
+ // ������������item
+ clickHandler(index) {
+ this.$emit('click', index)
+ }
+ },
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+
+ .u-swiper {
+ @include flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ overflow: hidden;
+
+ &__wrapper {
+ flex: 1;
+
+ &__item {
+ flex: 1;
+
+ &__wrapper {
+ @include flex;
+ position: relative;
+ overflow: hidden;
+ transition: transform 0.3s;
+ flex: 1;
+
+ &__image {
+ flex: 1;
+ }
+
+ &__video {
+ flex: 1;
+ }
+
+ &__title {
+ position: absolute;
+ background-color: rgba(0, 0, 0, 0.3);
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-size: 28rpx;
+ padding: 12rpx 24rpx;
+ color: #FFFFFF;
+ flex: 1;
+ }
+ }
+ }
+ }
+
+ &__indicator {
+ position: absolute;
+ bottom: 10px;
+ }
+ }
+</style>
--
Gitblit v1.8.0