效果图如下所示
这里用到监听滑动组件(vue-touch)
文章地址:https://blog.csdn.net/qq_43764578/article/details/104709333
<template>
<div id="app" style="background-color: #f7f7f7;">
<div class="indes">
<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright">
<div v-for="(item,index) in detail" :class="'centerx curr'+curr[index]">
<div class="center-imagex">
<img :src="item.img" />
</div>
<div class="center-ney">
<div>{{item.name}}</div>
</div>
</div>
</v-touch>
</div>
</div>
</template>
<script>
import { getHomeData } from "@/api/public";
import dialog from "@/utils/dialog";//弹窗
export default {
props: {
msg: String
},
data() {
return {
detail:[
{ img: 'http://img3.imgtn.bdimg.com/it/u=1960330002,2943700579&fm=26&gp=0.jpg', name:'测试内容1测试内容1测试内容1测试内容1测试内容1'},
{ img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=225193914,751284870&fm=26&gp=0.jpg', name:'测试内容2测试内容2测试内容2测试内容2测试内容2'},
{ img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3019995954,636527762&fm=26&gp=0.jpg', name:'测试内容3测试内容3测试内容3测试内容3测试内容3'}
],
curr: [0, 1, 2],
towards:'',
interval:''
}
},
mounted(){
this.onshow();
},
methods: {
onshow:function(e){
let that = this
that.interval = setInterval(function () {
if (that.curr[0] == 0){
that.curr = [2,0,1]
} else if (that.curr[1] == 0){
that.curr = [1,2,0]
} else if (that.curr[2] == 0){
that.curr = [0,1,2]
}
},3000)
},
swiperleft: function () {
// 左划
let that = this
clearInterval(that.interval)
if (that.curr[0] == 0) {
that.curr = [2, 0, 1]
} else if (that.curr[1] == 0) {
that.curr = [1, 2, 0]
} else if (that.curr[2] == 0) {
that.curr = [0, 1, 2]
}
this.onshow();
},
swiperright: function () {
// 右滑
let that = this
clearInterval(that.interval)
if (that.curr[0] == 0) {
that.curr = [1, 2, 0]
} else if (that.curr[1] == 0) {
that.curr = [0, 1, 2]
} else if (that.curr[2] == 0) {
that.curr = [2, 0, 1]
}
this.onshow();
},
},
}
</script>
<style>
.indes{
width: 100%;
float: left;
overflow: hidden;
padding: 3%;
background-color: #e54d42;
position: relative;
}
.centerx{
float: left;
overflow: hidden;
background-color: #fff;
padding: 3%;
border-radius: 0.1rem;
transition: all 0.5s;
}
.center-imagex{
width: 30%;
height: 100%;
float: left;
}
.center-imagex>img{
width: 100%;
height: 100%;
}
.center-ney{
width: 70%;
height: 100%;
float: left;
padding: 0 0 0 3%;
font-size: 0.24rem;
}
.center-ney>div{
width: 100%;
float: left;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.curr2{
width: 94%;
height: 1.6rem;
margin: 0.2rem 0;
position: absolute;
left: 3%;
z-index: 1;
opacity: 0.8;
}
.curr1{
width: 91%;
height: 1.8rem;
margin: 0.1rem 0;
position: absolute;
left: 3%;
z-index: 2;
opacity: 0.9;
}
.curr0{
width: 94%;
height: 2rem;
position: relative;
left: 0;
z-index: 3;
}
</style>
有什么问题欢迎评论留言,我会及时回复你的