效果图如下所示
.wxml
<view class="index">
<view class="center curr{{curr > index?((curr - index) > 1?2:1):(index - curr) > 2?1:index - curr}}"
wx:for="{{detail}}" wx:key="index" bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend="touchEnd"
>
<view class="center-image">
<image src="{{item.img}}"></image>
</view>
<view class="center-ney">
<view>{{item.name}}</view>
</view>
</view>
</view>
.wxss
page{
background-color: #f7f7f7;
}
view,image{
box-sizing:border-box;
}
.index{
width: 100%;
float: left;
overflow: hidden;
padding: 3%;
background-color: #e54d42;
position: relative;
}
.center{
float: left;
overflow: hidden;
background-color: #fff;
padding: 3%;
border-radius: 10rpx;
transition: all 0.5s;
}
.center-image{
width: 30%;
height: 100%;
float: left;
}
.center-image>image{
width: 100%;
height: 100%;
}
.center-ney{
width: 70%;
height: 100%;
float: left;
padding: 0 0 0 3%;
font-size: 24rpx;
}
.center-ney>view{
width: 100%;
float: left;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.curr2{
width: 94%;
height: 160rpx;
margin: 20rpx 0;
position: absolute;
left: 3%;
z-index: 1;
opacity: 0.8;
}
.curr1{
width: 91%;
height: 180rpx;
margin: 10rpx 0;
position: absolute;
left: 3%;
z-index: 2;
opacity: 0.9;
}
.curr0{
width: 94%;
height: 200rpx;
position: relative;
left: 0;
z-index: 3;
}
.js
Page({
data: {
detail:[
{ img: 'http://img3.imgtn.bdimg.com/it/u=1960330002,2943700579&fm=26&gp=0.jpg', name:'1111111111111111111111111111111111'},
{ img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=225193914,751284870&fm=26&gp=0.jpg', name:'222222222222222222222222222222'},
{ img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3019995954,636527762&fm=26&gp=0.jpg', name:'3333333333333333333333333333333'},
{ img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F13%2F20170713140843_KrwNF.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642297008&t=55ea63589d129189d7971f4e7ebf99ed', name:'44444444444444444444444444444'},
],
curr:0,
towards:'',
interval:''
},
onShow:function(e){
let that = this
that.data.interval = setInterval(function () {
that.calation(1)
},3000)
},
calation(type){
var that = this
if(type == 1){
that.setData({
curr: (that.data.curr + 1) >= that.data.detail.length?0:(that.data.curr + 1)
})
}else{
that.setData({
curr: (that.data.curr - 1) < 0?that.data.detail.length - 1:(that.data.curr - 1)
})
}
},
onHide: function () {
clearInterval(this.data.interval)
},
onTabItemTap:function(){
clearInterval(this.data.interval)
},
touchStart: function (e) {
if (e.touches.length == 1) {
this.setData({
startX: e.touches[0].clientX
});
}
},
touchMove: function (e) {
if (e.touches.length == 1) {
var moveX = e.touches[0].clientX;
var towards = this.data.startX - moveX;
this.setData({
towards: towards
})
}
},
touchEnd:function(e){
let that = this
if (that.data.towards != ''){
clearInterval(that.data.interval)
if (that.data.towards < 0) {//向右
that.calation(2)
} else if (that.data.towards > 0) {//向左
that.calation(1)
}
that.onShow();
}
},
})
有什么问题欢迎评论留言,我会及时回复你的