微信小程序如何实现卡片层叠滑动效果？

本文共计1295个文字，预计阅读时间需要6分钟。

原文：本文字例为大家庭分享了微信小程序实现卡片层叠滚动的具体代码，供大家参考，具体内容如下+实现效果：1.左右滑动时，向相对方向移动一个卡片位置；2.点击某一项时，将点击项位置移动到顶部。

简化版：大家庭分享了微信小程序卡片层叠滚动代码，内容如下+效果：1.左右滑动移动卡片；2.点击项移至顶部。

本文实例为大家分享了微信小程序实现卡片层叠滑动的具体代码，供大家参考，具体内容如下

实现效果：

1.左右滑动时，向相应方向移动一个卡片位置；
2.点击某一项时，将点击项位置移动到中间位置；

代码如下：

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}}"  style="z-index: {{item.zIndex}} ;opacity:{{item.opacity}};"             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 h3{ font: 400 30px/18px "Microsoft Yahei"; color:#222222; } .slide_right h3 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 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: .7; }

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/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: []   },   /**    * 生命周期函数--监听页面加载    */   onLoad: function(options) {     this.__set__();     this.move();   },   /**    * 生命周期函数--监听页面初次渲染完成    */   onReady: function() {   },   /**    * 生命周期函数--监听页面显示    */   onShow: function() {   },   /**    * 生命周期函数--监听页面隐藏    */   onHide: function() {   },   /**    * 生命周期函数--监听页面卸载    */   onUnload: function() {   },   /**    * 页面相关事件处理函数--监听用户下拉动作    */   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       })     }   },   //手指触发开始移动   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();     }   }, })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。