From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-swiper/u-swiper.vue | 340 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 340 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-swiper/u-swiper.vue b/uview-ui/components/u-swiper/u-swiper.vue
new file mode 100644
index 0000000..b6e7e81
--- /dev/null
+++ b/uview-ui/components/u-swiper/u-swiper.vue
@@ -0,0 +1,340 @@
+<template>
+ <view class="u-swiper-wrap" :style="{
+ borderRadius: `${borderRadius}rpx`
+ }">
+ <swiper :current="elCurrent" @change="change" @animationfinish="animationfinish" :interval="interval" :circular="circular" :duration="duration" :autoplay="autoplay"
+ :previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'" :next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
+ :style="{
+ height: height + 'rpx',
+ backgroundColor: bgColor
+ }">
+ <swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index">
+ <view class="u-list-image-wrap" @tap.stop.prevent="listClick(index)" :class="[uCurrent != index ? 'u-list-scale' : '']" :style="{
+ borderRadius: `${borderRadius}rpx`,
+ transform: effect3d && uCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)',
+ margin: effect3d && uCurrent != index ? '0 20rpx' : 0,
+ }">
+ <image class="u-swiper-image" :src="item[name] || item" :mode="imgMode"></image>
+ <view v-if="title && item.title" class="u-swiper-title u-line-1" :style="[{
+ 'padding-bottom': titlePaddingBottom
+ }, titleStyle]">
+ {{ item.title }}
+ </view>
+ </view>
+ </swiper-item>
+ </swiper>
+ <view class="u-swiper-indicator" :style="{
+ top: indicatorPos == 'topLeft' || indicatorPos == 'topCenter' || indicatorPos == 'topRight' ? '12rpx' : 'auto',
+ bottom: indicatorPos == 'bottomLeft' || indicatorPos == 'bottomCenter' || indicatorPos == 'bottomRight' ? '12rpx' : 'auto',
+ justifyContent: justifyContent,
+ padding: `0 ${effect3d ? '74rpx' : '24rpx'}`
+ }">
+ <block v-if="mode == 'rect'">
+ <view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index == uCurrent }" v-for="(item, index) in list"
+ :key="index"></view>
+ </block>
+ <block v-if="mode == 'dot'">
+ <view class="u-indicator-item-dot" :class="{ 'u-indicator-item-dot-active': index == uCurrent }" v-for="(item, index) in list"
+ :key="index"></view>
+ </block>
+ <block v-if="mode == 'round'">
+ <view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index == uCurrent }" v-for="(item, index) in list"
+ :key="index"></view>
+ </block>
+ <block v-if="mode == 'number'">
+ <view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ list.length }}</view>
+ </block>
+ </view>
+ </view>
+</template>
+
+<script>
+ /**
+ * swiper 杞挱鍥�
+ * @description 璇ョ粍浠朵竴鑸敤浜庡鑸疆鎾紝骞垮憡灞曠ず绛夊満鏅�,鍙紑绠卞嵆鐢�
+ * @tutorial https://www.uviewui.com/components/swiper.html
+ * @property {Array} list 杞挱鍥炬暟鎹紝瑙佸畼缃�"鍩烘湰浣跨敤"璇存槑
+ * @property {Boolean} title 鏄惁鏄剧ず鏍囬鏂囧瓧锛岄渶瑕侀厤鍚坙ist鍙傛暟锛岃瀹樼綉璇存槑锛堥粯璁alse锛�
+ * @property {String} mode 鎸囩ず鍣ㄦā寮忥紝瑙佸畼缃戣鏄庯紙榛樿round锛�
+ * @property {String Number} height 杞挱鍥剧粍浠堕珮搴︼紝鍗曚綅rpx锛堥粯璁�250锛�
+ * @property {String} indicator-pos 鎸囩ず鍣ㄧ殑浣嶇疆锛堥粯璁ottomCenter锛�
+ * @property {Boolean} effect3d 鏄惁寮�鍚�3D鏁堟灉锛堥粯璁alse锛�
+ * @property {Boolean} autoplay 鏄惁鑷姩鎾斁锛堥粯璁rue锛�
+ * @property {String Number} interval 鑷姩杞挱鏃堕棿闂撮殧锛屽崟浣峬s锛堥粯璁�2500锛�
+ * @property {Boolean} circular 鏄惁琛旀帴鎾斁锛岃瀹樼綉璇存槑锛堥粯璁rue锛�
+ * @property {String} bg-color 鑳屾櫙棰滆壊锛堥粯璁�#f3f4f6锛�
+ * @property {String Number} border-radius 杞挱鍥惧渾瑙掑�硷紝鍗曚綅rpx锛堥粯璁�8锛�
+ * @property {Object} title-style 鑷畾涔夋爣棰樻牱寮�
+ * @property {String Number} effect3d-previous-margin mode = true妯″紡鐨勬儏鍐典笅锛屾縺娲婚」涓庡墠鍚庨」涔嬮棿鐨勮窛绂伙紝鍗曚綅rpx锛堥粯璁�50锛�
+ * @property {String} img-mode 鍥剧墖鐨勮鍓ā寮忥紝璇﹁image缁勪欢瑁佸壀妯″紡锛堥粯璁spectFill锛�
+ * @event {Function} click 鐐瑰嚮杞挱鍥炬椂瑙﹀彂
+ * @example <u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper>
+ */
+ export default {
+ name: "u-swiper",
+ props: {
+ // 杞挱鍥剧殑鏁版嵁,鏍煎紡濡傦細[{image: 'xxxx', title: 'xxxx'}锛寋image: 'yyyy', title: 'yyyy'}]锛屽叾涓璽itle瀛楁鍙��
+ list: {
+ type: Array,
+ default () {
+ return [];
+ }
+ },
+ // 鏄惁鏄剧ずtitle鏍囬
+ title: {
+ type: Boolean,
+ default: false
+ },
+ // 鐢ㄦ埛鑷畾涔夌殑鎸囩ず鍣ㄧ殑鏍峰紡
+ indicator: {
+ type: Object,
+ default () {
+ return {};
+ }
+ },
+ // 鍦嗚鍊�
+ borderRadius: {
+ type: [Number, String],
+ default: 8
+ },
+ // 闅斿涔呰嚜鍔ㄥ垏鎹�
+ interval: {
+ type: [String, Number],
+ default: 3000
+ },
+ // 鎸囩ず鍣ㄧ殑妯″紡锛宺ect|dot|number|round
+ mode: {
+ type: String,
+ default: 'round'
+ },
+ // list鐨勯珮搴︼紝鍗曚綅rpx
+ height: {
+ type: [Number, String],
+ default: 250
+ },
+ // 鎸囩ず鍣ㄧ殑浣嶇疆锛宼opLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight
+ indicatorPos: {
+ type: String,
+ default: 'bottomCenter'
+ },
+ // 鏄惁寮�鍚缉鏀炬晥鏋�
+ effect3d: {
+ type: Boolean,
+ default: false
+ },
+ // 3D妯″紡鐨勬儏鍐典笅锛屾縺娲籭tem涓庡墠鍚巌tem涔嬮棿鐨勮窛绂伙紝鍗曚綅rpx
+ effect3dPreviousMargin: {
+ type: [Number, String],
+ default: 50
+ },
+ // 鏄惁鑷姩鎾斁
+ autoplay: {
+ type: Boolean,
+ default: true
+ },
+ // 鑷姩杞挱鏃堕棿闂撮殧锛屽崟浣峬s
+ duration: {
+ type: [Number, String],
+ default: 500
+ },
+ // 鏄惁琛旀帴婊戝姩锛屽嵆鍒版渶鍚庝竴寮犳椂鎺ョ潃婊戝姩锛屾槸鍚﹁嚜鍔ㄥ垏鎹㈠埌绗竴寮�
+ circular: {
+ type: Boolean,
+ default: true
+ },
+ // 鍥剧墖鐨勮鍓ā寮�
+ imgMode: {
+ type: String,
+ default: 'aspectFill'
+ },
+ // 浠巐ist鏁扮粍涓鍙栫殑鍥剧墖鐨勫睘鎬у悕
+ name: {
+ type: String,
+ default: 'image'
+ },
+ // 鑳屾櫙棰滆壊
+ bgColor: {
+ type: String,
+ default: '#f3f4f6'
+ },
+ // 鍒濆鍖栨椂锛岄粯璁ゆ樉绀虹鍑犻」
+ current: {
+ type: [Number, String],
+ default: 0
+ },
+ // 鏍囬鐨勬牱寮忥紝瀵硅薄褰㈠紡
+ titleStyle: {
+ type: Object,
+ default() {
+ return {}
+ }
+ }
+ },
+ watch: {
+ // 濡傛灉澶栭儴鐨刲ist鍙戠敓鍙樺寲锛屽垽鏂暱搴︽槸鍚﹁淇敼锛屽鏋滃墠鍚庨暱搴︿笉涓�鑷达紝閲嶇疆uCurrent鍊硷紝閬垮厤婧㈠嚭
+ list(nVal, oVal) {
+ if(nVal.length !== oVal.length) this.uCurrent = 0;
+ },
+ // 鐩戝惉澶栭儴current鐨勫彉鍖栵紝瀹炴椂淇敼鍐呴儴渚濊禆浜庢娴媢Current鍊硷紝濡傛灉鏇存柊浜哻urrent锛岃�屼笉鏄洿鏂皍Current锛�
+ // 灏变細閿欎贡锛屽洜涓烘寚绀哄櫒鏄緷璧栦簬uCurrent鐨�
+ current(n) {
+ this.uCurrent = n;
+ }
+ },
+ data() {
+ return {
+ uCurrent: this.current // 褰撳墠娲昏穬鐨剆wiper-item鐨刬ndex
+ };
+ },
+ computed: {
+ justifyContent() {
+ if (this.indicatorPos == 'topLeft' || this.indicatorPos == 'bottomLeft') return 'flex-start';
+ if (this.indicatorPos == 'topCenter' || this.indicatorPos == 'bottomCenter') return 'center';
+ if (this.indicatorPos == 'topRight' || this.indicatorPos == 'bottomRight') return 'flex-end';
+ },
+ titlePaddingBottom() {
+ let tmp = 0;
+ if (this.mode == 'none') return '12rpx';
+ if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode == 'number') {
+ tmp = '60rpx';
+ } else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode != 'number') {
+ tmp = '40rpx';
+ } else {
+ tmp = '12rpx';
+ }
+ return tmp;
+ },
+ // 鍥犱负uni鐨剆wiper缁勪欢鐨刢urrent鍙傛暟鍙帴鍙桸umber绫诲瀷锛岃繖閲屽仛涓�涓浆鎹�
+ elCurrent() {
+ return Number(this.current);
+ }
+ },
+ methods: {
+ listClick(index) {
+ this.$emit('click', index);
+ },
+ change(e) {
+ let current = e.detail.current;
+ this.uCurrent = current;
+ // 鍙戝嚭change浜嬩欢锛岃〃绀哄綋鍓嶈嚜鍔ㄥ垏鎹㈢殑index锛屼粠0寮�濮�
+ this.$emit('change', current);
+ },
+ // 澶存潯灏忕▼搴忎笉鏀寔animationfinish浜嬩欢锛屾敼鐢眂hange浜嬩欢
+ // 鏆備笉鐩戝惉姝や簨浠讹紝鍥犱负涓嶅啀缁檚wiper缁戝畾uCurrent灞炴��
+ animationfinish(e) {
+ // #ifndef MP-TOUTIAO
+ // this.uCurrent = e.detail.current;
+ // #endif
+ }
+ }
+ };
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-swiper-wrap {
+ position: relative;
+ overflow: hidden;
+ transform: translateY(0);
+ }
+
+ .u-swiper-image {
+ width: 100%;
+ will-change: transform;
+ height: 100%;
+ /* #ifndef APP-NVUE */
+ display: block;
+ /* #endif */
+ /* #ifdef H5 */
+ pointer-events: none;
+ /* #endif */
+ }
+
+ .u-swiper-indicator {
+ padding: 0 24rpx;
+ position: absolute;
+ @include vue-flex;
+ width: 100%;
+ z-index: 1;
+ }
+
+ .u-indicator-item-rect {
+ width: 26rpx;
+ height: 8rpx;
+ margin: 0 6rpx;
+ transition: all 0.5s;
+ background-color: rgba(0, 0, 0, 0.3);
+ }
+
+ .u-indicator-item-rect-active {
+ background-color: rgba(255, 255, 255, 0.8);
+ }
+
+ .u-indicator-item-dot {
+ width: 14rpx;
+ height: 14rpx;
+ margin: 0 6rpx;
+ border-radius: 20rpx;
+ transition: all 0.5s;
+ background-color: rgba(0, 0, 0, 0.3);
+ }
+
+ .u-indicator-item-dot-active {
+ background-color: rgba(255, 255, 255, 0.8);
+ }
+
+ .u-indicator-item-round {
+ width: 14rpx;
+ height: 14rpx;
+ margin: 0 6rpx;
+ border-radius: 20rpx;
+ transition: all 0.5s;
+ background-color: rgba(0, 0, 0, 0.3);
+ }
+
+ .u-indicator-item-round-active {
+ width: 34rpx;
+ background-color: rgba(255, 255, 255, 0.8);
+ }
+
+ .u-indicator-item-number {
+ padding: 6rpx 16rpx;
+ line-height: 1;
+ background-color: rgba(0, 0, 0, 0.3);
+ border-radius: 100rpx;
+ font-size: 26rpx;
+ color: rgba(255, 255, 255, 0.8);
+ }
+
+ .u-list-scale {
+ transform-origin: center center;
+ }
+
+ .u-list-image-wrap {
+ width: 100%;
+ height: 100%;
+ flex: 1;
+ transition: all 0.5s;
+ overflow: hidden;
+ box-sizing: content-box;
+ position: relative;
+ }
+
+ .u-swiper-title {
+ position: absolute;
+ background-color: rgba(0, 0, 0, 0.3);
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ font-size: 28rpx;
+ padding: 12rpx 24rpx;
+ color: rgba(255, 255, 255, 0.9);
+ }
+
+ .u-swiper-item {
+ @include vue-flex;
+ overflow: hidden;
+ align-items: center;
+ }
+</style>
--
Gitblit v1.9.3