小程序實現層疊卡片滑動效果

<!-- 輪播wxml代碼 -->
<view class="teachers_banner">
 <view class="lunbo_center clearfix teachers_b">
 <view class="slide" id="slide" bindtouchstart='moveStart' bindtouchend='moveItem'>
 <ul>
 <block wx:for="{{datas}}" wx:key>
 <li animation="{{item.animation}}" style="z-index: {{item.zIndex}} ;opacity:{{item.opacity}};"
 bindtap="choose" data-id="{{item.id}}">
 <image src="{{item.iamge}}" />
 </li>
 </block>
 </ul>
 </view>
 </view>
</view>

/*輪播圖片*/
.lunbo_center {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 padding: 50rpx 0;
 box-sizing: border-box;
}
.teachers_b {
 position: relative;
}
#slide {
 margin: 0 auto;
 width: 100%;
 height: 160px;
 position: relative;
}
#slide li {
 position: absolute;
 width: 600rpx;
 height: 300rpx;
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 align-items: flex-start;
 -webkit-box-align: flex-start;
 -webkit-align-items: flex-start;
 background: #fff;
 overflow: hidden;
 box-shadow: 0 0 20px #1d374d;
}
#slide li image {
 width: 100%;
 height: 100%;
}
.slide_left {
 width: 240px;
}
.slide_right {
 padding: 40px;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 flex: 1;
 min-width: 0;
}
.slide_right h3 {
 font: 400 30px/18px "Microsoft Yahei";
 color: #222;
}
.slide_right h3 span {
 display: inline-block;
 margin-left: 10px;
 font: 400 14px/36px "Microsoft Yahei";
 color: #555;
}
.slide_right p {
 padding: 20px 0 30px;
 color: #555;
 font: 400 14px/24px "Microsoft Yahei";
 border-bottom: 1px solid #dbdbdb;
}
.slide_right dl {
 padding-top: 30px;
}
.slide_right dd {
 /* float: left; */
 width: 33.3%;
 color: #777;
 font: 400 12px/24px "Microsoft Yahei";
}
.slide_right dd h3 {
 color: #ff9000;
 margin-bottom: 20px;
}
.arrow {
 display: none;
}
.arrow .prev, .arrow .next {
 position: absolute;
 width: 64px;
 top: 38%;
 z-index: 9;
 font: 700 96px 'simsun';
 opacity: 0.3;
 color: #fff;
 cursor: pointer;
}
.arrow .prev {
 left: -220px;
}
.arrow .next {
 right: -220px;
}
.arrow .prev:hover, .arrow .next:hover {
 color: #00a0e9;
 opacity: 0.7;
}

// js代碼
Page({
 /**
 * 頁面的初始數據
 */
 data: {
 startX: 0,
 endX: 0,
 iCenter: 3,
 datas: [{
 id: 1,
 zIndex: 2,
 opacity: 0.2,
 left: 10,
 iamge: "../../icon/lunbo2.jpg",
 animation: null
 },
 {
 id: 2,
 zIndex: 4,
 opacity: 0.4,
 left: 20,
 iamge: "../../icon/lunbo3.jpg",
 animation: null
 },
 {
 id: 3,
 zIndex: 6,
 opacity: 0.6,
 left: 30,
 iamge: "../../icon/lunbo4.jpg",
 animation: null
 },
 {
 id: 4,
 zIndex: 8,
 opacity: 1,
 left: 40,
 iamge: "../../icon/lunbo1.jpg",
 animation: null
 },
 {
 id: 5,
 zIndex: 6,
 opacity: 0.6,
 left: 50,
 iamge: "../../icon/lunbo2.jpg",
 animation: null
 },
 {
 id: 6,
 zIndex: 4,
 opacity: 0.4,
 left: 60,
 iamge: "../../icon/lunbo3.jpg",
 animation: null
 } ,
 {
 id: 7,
 zIndex: 2,
 opacity: 0.2,
 left: 70,
 iamge: "../../icon/lunbo1.jpg",
 animation: null
 }
 ],
 order: []
 },
 /**
 * 生命周期函數--監聽頁面加載
 */
 onLoad: function (options) {
 this.__set__();
 this.move();
 },
 move: function () {
 var datas = this.data.datas;
 /*圖片分布*/
 for (var i = 0; i < datas.length; i++) {
 var data = datas[i];
 var animation = wx.createAnimation({
 duration: 100
 });
 animation.translateX(data.left).step();
 this.setData({
 ["datas[" + i + "].animation"]: animation.export(),
 ["datas[" + i + "].zIndex"]: data.zIndex,
 ["datas[" + i + "].opacity"]: data.opacity,
 })
 }
 },
 /**左箭頭 */
 left: function () {
 //
 var last = this.data.datas.pop(); //獲取數組的最后一個
 this.data.datas.unshift(last);//放到數組的第一個
 var orderFirst = this.data.order.shift();
 this.data.order.push(orderFirst);
 this.move();
 },
 /** */
 right: function () {
 var first = this.data.datas.shift(); //獲取數組的第一個
 this.data.datas.push(first);//放到數組的最后一個位置
 var orderLast = this.data.order.pop();
 this.data.order.unshift(orderLast);
 this.move();
 },
 /**點擊某項 */
 choose: function (e) {
 var that = this;
 var id = e.currentTarget.dataset.id;
 var order = that.data.order;
 var index = 0;
 for (var i = 0; i < order.length; i++) {
 if (id == order[i]) {
 index = i;
 break;
 }
 }
 if (index < that.data.iCenter) {
 for (var i = 0; i < that.data.iCenter - index; i++) {
 this.data.datas.push(this.data.datas.shift()); //獲取第一個放到最后一個
 this.data.order.unshift(this.data.order.pop());
 // this.right() 
 }
 } else if (index > that.data.iCenter) {
 for (var i = 0; i < index - that.data.iCenter; i++) {
 this.data.datas.unshift(this.data.datas.pop()); //獲取最后一個放到第一個
 this.data.order.push(this.data.order.shift());
 // this.left();
 }
 }
 this.move();
 },
 /**新的排列復制到新的數組中 */
 __set__: function () {
 var that = this;
 var order = that.data.order;
 var datas = that.data.datas;
 for (var i = 0; i < datas.length; i++) {
 that.setData({
 ["order[" + i + "]"]: datas[i].id
 })
 }
 },
 //手指觸發開始移動
 moveStart: function (e) {
 console.log(e);
 var startX = e.changedTouches[0].pageX;
 this.setData({
 startX: startX
 });
 },
 //手指觸摸后移動完成觸發事件
 moveItem: function (e) {
 console.log(e);
 var that = this;
 var endX = e.changedTouches[0].pageX;
 this.setData({
 endX: endX
 });
 //計算手指觸摸偏移劇距離
 var moveX = this.data.startX - this.data.endX;
 //向左移動
 if (moveX > 20) {
 this.left();
 }
 if (moveX < -20) {
 this.right();
 }
 },
})