From 9ab4955166b7b1370fc2a49b152353241ca9e64a Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 16 十月 2023 09:22:23 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-swiper/u-swiper.vue | 255 ---------------------------------------------------
1 files changed, 0 insertions(+), 255 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
index 0cfb229..e69de29 100644
--- 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
@@ -1,255 +0,0 @@
-<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