微信小程序如何實現卡片層疊滑動效果

小編給大家分享一下微信小程序如何實現卡片層疊滑動效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

微信小程序之卡片層疊滑動效果的具體內容如下

代碼：

js：

// index/gun/jsSwiper2/jsSwiper2.js
Page({

 /**
 * 頁面的初始數據
 */
 data: {
 startX: 0,
 endX: 0,
 iCenter: 3,
 datas: [{
  id: 1,
  zIndex: 2,
  opacity: 0.2,
  left: 40,
  iamge: "../../images/1.jpg",
  animation: null
 },
 {
  id: 2,
  zIndex: 4,
  opacity: 0.4,
  left: 80,
  iamge: "../../images/2.jpg",
  animation: null
 },
 {
  id: 3,
  zIndex: 6,
  opacity: 0.6,
  left: 120,
  iamge: "../../images/3.jpg",
  animation: null
 },
 {
  id: 4,
  zIndex: 8,
  opacity: 1,
  left: 160,
  iamge: "../../images/4.jpg",
  animation: null
 },
 {
  id: 5,
  zIndex: 6,
  opacity: 0.6,
  left: 200,
  iamge: "../../images/5.jpg",
  animation: null
 },
 {
  id: 6,
  zIndex: 4,
  opacity: 0.4,
  left: 240,
  iamge: "../../images/6.jpg",
  animation: null
 },
 {
  id: 7,
  zIndex: 2,
  opacity: 0.2,
  left: 280,
  iamge: "../../images/7.jpg",
  animation: null
 },
 ],
 order: []
 },

 /**
 * 生命周期函數--監(jiān)聽頁面加載
 */
 onLoad: function (options) {
 this.__set__();
 this.move();
 },

 /**
 * 生命周期函數--監(jiān)聽頁面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函數--監(jiān)聽頁面顯示
 */
 onShow: function () {

 },

 /**
 * 生命周期函數--監(jiān)聽頁面隱藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函數--監(jiān)聽頁面卸載
 */
 onUnload: function () {

 },

 /**
 * 頁面相關事件處理函數--監(jiān)聽用戶下拉動作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 頁面上拉觸底事件的處理函數
 */
 onReachBottom: function () {

 },

 /**
 * 用戶點擊右上角分享
 */
 onShareAppMessage: function () {

 },
 move: function () {
 var datas = this.data.datas;
 /*圖片分布*/
 for (var i = 0; i < datas.length; i++) {
  var data = datas[i];
  var animation = wx.createAnimation({
  duration: 200
  });
  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
  })
 }
 },
 //手指觸發(fā)開始移動
 moveStart: function (e) {
 console.log(e);
 var startX = e.changedTouches[0].pageX;
 this.setData({
  startX: startX
 });
 },
 //手指觸摸后移動完成觸發(fā)事件
 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();
 }
 },
})

wxml：

<view class="teachers_banner">
 <view class="container clearfix teachers_b">
 <view class="slide" id="slide" bindtouchstart='moveStart' bindtouchend='moveItem'>

  <block wx:for="{{datas}}">
  <li animation="{{item.animation}}"  bindtap="choose" data-id="{{item.id}}">
   <image src="{{item.iamge}}"></image>
  </li>
  </block>

 </view>
 </view>
</view>

wxss：

.teachers_banner {
 width: 100%;
 height: 650px;
 background-size: cover;
 position: relative;
 overflow: hidden;
}

.teachers_b {
 position: relative;
 margin-top: 80px;
}

#slide {
 margin: 0 auto;
 width: 100%;
 height: 350px;
 position: relative;
}

image {
 width: 400rpx;
 height: 550rpx;
}

#slide li {
 position: absolute;
 width: 400rpx;
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 align-items: flex-start;
 -webkit-box-align: flex-start;
 -webkit-align-items: flex-start;
 overflow: hidden;
 box-shadow: 0 0 20px #1d374d;
}

#slide li img {
 width: 100%;
 height: 100%;
}

.slide_right {
 padding: 40px;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 flex: 1;
 min-width: 0;
}

.slide_right dl {
 padding-top: 10px;
}

.arrow .prev, .arrow .next {
 position: absolute;
 width: 50px;
 top: 38%;
 z-index: 9;
 font: 700 96px 'simsun';
 opacity: 0.3;
 color: #fff;
 cursor: pointer;
}

效果：

1.左右滑動時，向相應方向移動一個卡片位置；
2.點擊某一項時，將點擊項位置移動到中間位置；

看完了這篇文章，相信你對“微信小程序如何實現卡片層疊滑動效果”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！