From 1e61215b48e59e94c1ed98e4ef956227d689d6bc Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 06 Nov 2023 08:48:39 +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