微信小程序如何實(shí)現(xiàn)卡片層疊滑動(dòng)

本篇內(nèi)容主要講解“微信小程序如何實(shí)現(xiàn)卡片層疊滑動(dòng)”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“微信小程序如何實(shí)現(xiàn)卡片層疊滑動(dòng)”吧!

實(shí)現(xiàn)效果：

1.左右滑動(dòng)時(shí)，向相應(yīng)方向移動(dòng)一個(gè)卡片位置；
2.點(diǎn)擊某一項(xiàng)時(shí)，將點(diǎn)擊項(xiàng)位置移動(dòng)到中間位置；

代碼如下：

wxml：

<view class="teachers_banner">
  <view class="container clearfix teachers_b">
    <view class="slide" id="slide" bindtouchstart='moveStart' bindtouchend='moveItem'>
      <ul>
        <block wx:for="{{datas}}">
          <li animation="{{item.animation}}"  
            bindtap="choose" data-id="{{item.id}}"
          >
            <image src="{{item.iamge}}" alt="林奇涵" title=""></image>
          </li>
        </block>
      </ul>

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

css：

/* index/gun/jsSwiper2/jsSwiper2.wxss */
/*輪播圖片*/
.teachers_banner{
    width:100%;
    height:575px;
    /* background: url(../images/teachers_banner.jpg) no-repeat center top; */
    background-size: cover;
     position: relative;
    overflow: hidden;
}
.teachers_b{
  position:relative;
  margin-top:130px;
}
#slide {
    margin: 0 auto;
    width: 100%;
    height: 330px;
    position: relative;
  }

  image{
    width: 200rpx;
    height: 200rpx;

  }

#slide li {
    position: absolute;
    width:200rpx;
    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 img {
    width: 100%;
    height: 100%;
}
.slide_left{
 /* width:240px;*/
}
.slide_right{
 /* width:440px;*/
  padding: 40px;
  -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}
.slide_right h4{
font: 400 30px/18px "Microsoft Yahei";
color:#222222;
}
.slide_right h4 span{
  display:inline-block;
  margin-left:10px;
  font: 400 14px/36px "Microsoft Yahei";
color:#555555;
}
.slide_right p{
  padding:20px 0 30px;
  color:#555555;
    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 h4{
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: .7;
}

js：

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

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    startX:0,
    endX:0,
    iCenter: 3,
    datas: [{
        id: 1,
        zIndex: 2,
        opacity: 0.2,
        left: 40,
        iamge: "../images/teacher01.jpg",
        animation: null
      },
      {
        id: 2,
        zIndex: 4,
        opacity: 0.4,
        left: 80,
        iamge: "../images/teacher02.jpg",
        animation: null
      },
      {
        id: 3,
        zIndex: 6,
        opacity: 0.6,
        left: 120,
        iamge: "../images/teacher03.jpg",
        animation: null
      },
      {
        id: 4,
        zIndex: 8,
        opacity:1,
        left: 160,
        iamge: "../images/teacher04.jpg",
        animation: null
      },
      {
        id: 5,
        zIndex: 6,
        opacity: 0.6,
        left: 200,
        iamge: "../images/teacher05.jpg",
        animation: null
      },
      {
        id: 6,
        zIndex: 4,
        opacity: 0.4,
        left: 240,
        iamge: "../images/teacher06.jpg",
        animation: null
      },
      {
        id: 7,
        zIndex: 2,
        opacity: 0.2,
        left: 280,
        iamge: "../images/7.jpg",
        animation: null
      },
    ],
    order: []
  },

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

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

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
   */
  onShow: function() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
   */
  onUnload: function() {

  },

  /**
   * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
   */
  onPullDownRefresh: function() {

  },

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

  },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  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(); //獲取數(shù)組的最后一個(gè)
    this.data.datas.unshift(last);//放到數(shù)組的第一個(gè)
    var orderFirst = this.data.order.shift();
    this.data.order.push(orderFirst);
    this.move();
  },
  /** */
  right: function() {
    var first = this.data.datas.shift(); //獲取數(shù)組的第一個(gè)
    this.data.datas.push(first);//放到數(shù)組的最后一個(gè)位置
    var orderLast = this.data.order.pop();
    this.data.order.unshift(orderLast);
    this.move();
  },
  /**點(diǎn)擊某項(xiàng) */
  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()); //獲取第一個(gè)放到最后一個(gè)
        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()); //獲取最后一個(gè)放到第一個(gè)
        this.data.order.push(this.data.order.shift());
        // this.left();
      }
    }
    this.move();
  },
  /**新的排列復(fù)制到新的數(shù)組中 */
  __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ā)開(kāi)始移動(dòng)
  moveStart: function (e) {
    console.log(e);
    var startX = e.changedTouches[0].pageX;
    this.setData({
      startX: startX
    });
  },
  //手指觸摸后移動(dòng)完成觸發(fā)事件
  moveItem: function (e) {
    console.log(e);
    var that = this;
    var endX = e.changedTouches[0].pageX;
    this.setData({
      endX: endX
    });
    //計(jì)算手指觸摸偏移劇距離
    var moveX = this.data.startX - this.data.endX;
    //向左移動(dòng)
    if (moveX > 20) {
      this.left();
    }
    if (moveX < -20) {
      this.right();
    }
  },
})

到此，相信大家對(duì)“微信小程序如何實(shí)現(xiàn)卡片層疊滑動(dòng)”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！