From 627c3e0a6920131d75eafa4646db373ccc936546 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:52:07 +0800
Subject: [PATCH] 小程序diamante
---
minipro_standard/uni_modules/uview-ui/components/u-swiper/u-swiper.vue | 255 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 255 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-swiper/u-swiper.vue b/minipro_standard/uni_modules/uview-ui/components/u-swiper/u-swiper.vue
new file mode 100644
index 0000000..0cfb229
--- /dev/null
+++ b/minipro_standard/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)]"
+ >
+ <!-- 鍦╪vue涓紝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锛宭eft锛宺ight杩涜瀹氫綅
+ * @property {String} indicatorMode 鎸囩ず鍣ㄦā寮忥紙榛樿 'line' 锛�
+ * @property {Boolean} autoplay 鏄惁鑷姩鍒囨崲锛堥粯璁� true 锛�
+ * @property {String | Number} current 褰撳墠鎵�鍦ㄦ粦鍧楃殑 index锛堥粯璁� 0 锛�
+ * @property {String} currentItemId 褰撳墠鎵�鍦ㄦ粦鍧楃殑 item-id 锛屼笉鑳戒笌 current 琚悓鏃舵寚瀹�
+ * @property {String | Number} interval 婊戝潡鑷姩鍒囨崲鏃堕棿闂撮殧锛坢s锛夛紙榛樿 3000 锛�
+ * @property {String | Number} duration 婊戝潡鍒囨崲杩囩▼鎵�闇�鏃堕棿锛坢s锛夛紙榛樿 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 鏄惁鏄剧ず鏍囬锛岃姹傛暟缁勫璞′腑鏈塼itle灞炴�э紙榛樿 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()
+ }
+ },
+ // 褰撲竴涓疆鎾璱tem涓鸿棰戞椂锛岃幏鍙栧畠鐨勮棰戞捣鎶�
+ 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.9.3