短视频平台搭建，淡入淡出 支持左滑右滑轮播图
<template>
<view class="grapSwiper">
<view class="banner" @touchstart="touchStart" @touchend="touchEnd">
<image v-for="(value,index) in swiperList" :key="index" class="pic" :src="value.imagePath" :animation="num==index?showpic:hidepic"/>
<view class="snipper">
<view class="sniItem" v-for="(item,ind) in swiperList" :key="ind" :class="num==ind?'activeItem':''"></view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'grapSwiper',
data () {
return {
touchStartX: 0, // 触屏起始点x
touchStartY: 0, // 触屏起始点y
swiperList:[
{
imagePath:'https://pla.o-banks.cn/attach/mgrImg/20220110/1641806731686.png'
},
{
imagePath:'https://pla.o-banks.cn/attach/mgrImg/20210923/1632361307137.png'
},
{
imagePath:'https://pla.o-banks.cn/attach/mgrImg/20210916/1631775560384.png'
}
],
setTime:null,
num:0,
timeCount:5000,
showpic:null,
hidepic:null
}
},
created () {
},
mounted(){
this.initSwiper();
},
methods:{
initSwiper(){
const animation = uni.createAnimation({
}) //创建一个动画实例
this.setTime = setInterval(() => {
this.num++
if(this.num >this.swiperList.length-1){
this.num = 0
}
//淡入
animation.opacity(1).step({
duration:300}) //描述动画
this.showpic = animation.export()
//淡出
animation.opacity(0).step({
duration:300})
this.hidepic=animation.export()
}, this.timeCount);
},
touchStart(e) {
this.touchStartX = e.touches[0].clientX;
this.touchStartY = e.touches[0].clientY;
},
touchEnd(e) {
let deltaX = e.changedTouches[0].clientX - this.touchStartX;
let deltaY = e.changedTouches[0].clientY - this.touchStartY;
if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
// 左滑右滑时重新初始化定时器
clearInterval(this.setTime)
this.initSwiper();
if (deltaX >= 0) {
this.num--
if(this.num <0){
this.num = this.swiperList.length-1
}
} else {
this.num++
if(this.num >this.swiperList.length-1){
this.num = 0
}
}
} else {
console.log("可能是误触！")
}
},
},
destroyed(){
clearInterval(this.setTime)
}
}
</script>
<style lang="scss" scoped>
.grapSwiper{
.banner{
width: 750rpx;
height: 640rpx;
position: relative;
.pic{
width: 750rpx;
height: 640rpx;
position: absolute;
}
.snipper{
position: absolute;
width: 100%;
height: 2rpx;
top: 210rpx;
left: 0;
display: flex;
align-items: center;
justify-content: center;
.sniItem{
width: 15rpx;
height: 2rpx;
background: #FFFFFF;
opacity: 0.4;
border-radius: 5rpx;
margin-right: 6rpx;
}
.activeItem{
width: 25rpx;
background: #FFFFFF;
opacity: 1;
}
}
}
}
</style>
以上就是短视频平台搭建，淡入淡出 支持左滑右滑轮播图， 更多内容欢迎关注之后的文章