uniapp 小程序 堆叠轮播图 左滑 右滑 自动翻页 点击停止自动翻页

uniapp 小程序 堆叠轮播图 左滑 右滑 自动翻页 点击停止自动翻页 超过指定时间未点击滑动 则继续开始滚动

1. 直接上代码 componentSwiper.vue 需要注意页面切换时清除计时器

<template><view><view class="swiperPanel" @touchstart="startMove" @touchend="endMove"><view class="swiperItem" v-for="(item, index) in swiperList" :key="index":style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}"><view class="children" @click="routerTo(item)"><image class="pic" :src="item.url"></image><text class="name">{{item.name}}</text></view></view></view></view>
</template><script>export default {props: {swiperList: {type: Array,default: [{url: 'https://cdn.uviewui.com/uview/goods/1.jpg',name: '这是一个图片'}]},// 自动翻页 间隔2秒timeNum:{type:Number,default:2000},// 点击后 5秒内未操作 自动翻页开启interval:{type:Number,default:5000},},data() {return {slideNote: {x: 0,y: 0},screenWidth: 0,itemStyle: [],timer: null,timer1: null};},watch: {swiperList: {handler(val) {if (val.length) {var macInfo = uni.getSystemInfoSync();this.screenWidth = macInfo.screenWidth;// 计算swiper样式this.swiperList.forEach((item, index) => {this.itemStyle.push(this.getStyle(index))})}},deep: true,immediate: true}},mounted() {this.doSomething()},onUnload() {this.timer = nullthis.timer1 = null},beforeDestroy() {this.timer = nullthis.timer1 = null},methods: {doSomething() {this.$nextTick(() => {this.timer = setInterval(() => {var newList = JSON.parse(JSON.stringify(this.itemStyle))// 向左滑动var last = [newList.pop()]newList = last.concat(newList)this.itemStyle = newList}, this.timeNum)})},routerTo(data) {// 此处为点击逻辑// 或者给父组件抛出事件// this.$emit("方法名字",参数)},getStyle(e) {if (e > this.swiperList.length / 2) {var right = this.swiperList.length - ereturn {transform: 'scale(' + (1 - right / 10) + ') translate(-' + (right * 14) + '%,0px)',zIndex: 100 - right,opacity: 0.8 / right}} else {return {transform: 'scale(' + (1 - e / 10) + ') translate(' + (e * 14) + '%,0px)',zIndex: 100 - e,opacity: 0.8 / e}}},startMove(e) {clearInterval(this.timer)this.timer = nullthis.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;},endMove(e) {var newList = JSON.parse(JSON.stringify(this.itemStyle))if ((e.changedTouches[0].pageX - this.slideNote.x) < -10) {// 向左滑动var last = [newList.pop()]newList = last.concat(newList)} else if ((e.changedTouches[0].pageX - this.slideNote.x) >= 10) {// 向右滑动newList.push(newList[0])newList.splice(0, 1)}this.itemStyle = newList// 清除之前的定时器，以防多次点击clearTimeout(this.timer1);// 设置定时器，5秒后执行doSomething方法this.timer1 = setTimeout(this.doSomething, this.interval);}}}
</script><style lang="scss">.swiperPanel {margin: 20rpx 0;height: 360rpx;width: 100%;overflow: hidden;position: relative;.swiperItem {height: 100%;width: 100%;position: absolute;top: 0;left: 0;transition: all .5s;.children {height: 100%;width: 580rpx;margin: 2rpx auto;position: relative;.pic {height: 100%;width: 100%;border-radius: 20px;// box-shadow: 0 0 10px #333;}.name {position: absolute;width: 100%;bottom: 0;left: 0;background: rgba(0, 0, 0, 0.5);box-shadow: 0rpx 4rpx 21rpx 0rpx rgba(0, 0, 0, 0.07);border-radius: 0 0 20px 20px;height: 85rpx;line-height: 85rpx;font-family: Source Han Sans SC, Source Han Sans SC;font-weight: 400;font-size: 32rpx;color: #FFFFFF;text-align: center;font-style: normal;text-transform: none;}}}}
</style>

2. 组件使用

	<view class=""><componentSwiper :swiper-list="spotList" /></view>
<script>
import componentSwiper from '@/components/componentSwiper.vue'
export default {components: {componentSwiper},data() {return {spotList:[{url: 'https://cdn.uviewui.com/uview/goods/1.jpg',name: '这是一个图片'},{url: 'https://cdn.uviewui.com/uview/goods/1.jpg',name: '这是一个图片'}]}}
}

3. 以上为全部代码，希望可以帮到您，您也可以更具自身需求进行修改。
4. 日常记录！完成。