uniapp 小程序 堆叠轮播图 左滑 右滑 自动翻页 点击停止自动翻页 超过指定时间未点击滑动 则继续开始滚动
- 直接上代码
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: '这是一个图片'
}
]
},
timeNum:{
type:Number,
default:2000
},
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;
this.swiperList.forEach((item, index) => {
this.itemStyle.push(this.getStyle(index))
})
}
},
deep: true,
immediate: true
}
},
mounted() {
this.doSomething()
},
onUnload() {
this.timer = null
this.timer1 = null
},
beforeDestroy() {
this.timer = null
this.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) {
},
getStyle(e) {
if (e > this.swiperList.length / 2) {
var right = this.swiperList.length - e
return {
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 = null
this.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);
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;
}
.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>
- 组件使用
<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: '这是一个图片'
}
]
}
}
}
- 以上为全部代码,希望可以帮到您,您也可以更具自身需求进行修改。
- 日常记录!完成。