小程序实现层叠卡片滑动效果

小程序层叠卡片滑动效果，供大家参考，具体内容如下

效果图

页面结构

！-轮播页面结构代码-view class=' teachers _ banner ' view class=' lunbo _ center clear fix teachers _ b ' view class=' slide ' id=' slide ' bindtuchstart=' move start ' bind touch end=' move item ' ul block wx : for=' { { datas } } ' wx : key Li animation=' { { item。动画} } ' style=' z-index : { { item }。zindex } }”opa city 3360 { { item }。不透明度} }；bind tap=' choose ' data-id=' { { item。id } }“image src=”http : { { item。//Li/block/ul/view/view wxss

/*轮播图片*/.lunbo _ center { display : flex flex-direction :柱；align-items:居中；正义-内容：空格；padd : 50 rpx 0；盒子尺寸：边框盒子；}.教师_b {位置：相对；} #滑动{ margin: 0 auto宽度： 100%;高度： 160像素；相对位置：} #滑动李{位置：绝对；宽度： 600 rpxheight : 300 rpx display :-web套件-盒子；display :-web套件-flex；display : flex align-items : flex-start；-web套件-box-align : flex-start；-web套件-align-items : flex-start；背景# fff飞越：隐藏；箱形阴影： 0 0 20px # 1d 374d} #幻灯片li图像{宽度： 100%；高度： 100%;}.向左滑动{ width: 240px}。slide _ right { padd : 40px-web kit-box-flex : 1；-web套件-flex : 1；flex : 1；最小宽度： 0;}.slide _ right H3 { font : 400 30px/18px '微软雅黑；color: # 222}。slide _ right H3 span { display : inline-block；左边距' left : 10pxfont : 400 14px/36px '微软雅黑；color: # 555}。slide _ right p { padd : 20px 0 30px；color : # 555 font : 400 14px/24px '微软雅黑；边框-底部： 1px实心# dbdbdbdb}.slide _ right dl { padding-top : 30px；}.slide _ right DD {/*向左浮动：*/宽： 33.3%；color : # 777 font : 400 12px/24px '微软雅黑；}.slide _ right DD H3 { color : # ff 9000；边距-底部： 20px}.箭头{ display:无}。箭头。上一个。箭头下一个{位置：绝对值；宽度： 64px前：名38%；z指数： 9；font : 700 96px ' simsunopathy 3360 0.3 color : # fffcursor :指针；}.箭头prev { left :-220 px；}.箭头。下一个{右侧：-220 px；}.箭头。prev:hover，1 .箭头。下一个：悬停{ color : # 00a 0e 9；opacity: 0.7 } js

//js代码页面({ /** *页面的初始数据*/data: { startX: 0，endX: 0，iCenter: 3，data :[{ 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:函数（选项){这个._ _ set _ _()；这个。move()；}，move:函数(){ var datas=this。数据。数据；/*图片分布*/for(var I=0；我。数据长度；I){ var数据=datas[I]；var动画=wx。创建动画({持续时间： 100 })；animation.translateX(data.left).step()；this.setData({ ['datas[' i ']).'动画']:动画。export()，['datas[' i '].zIndex']: data.zIndex，['datas[' i '].不透明度]:数据。不透明度，}) },/**左箭头*/left :函数(){//var last=this。数据。数据。pop()；//获取数组的最后一个this.data.datas.unshift(最后一个);//放到数组的第一个var顺序优先=这个。数据。秩序。shift()；这个。数据。秩序。推送(订单优先)；这个。move()；}，/* * */right : function(){ var first=this。数据。数据。shift()；//获取数组的第一个this.data.datas.push(第一个);//放到数组的最后一个位置var顺序最后=这个。数据。秩序。pop()；这个。数据。秩序。unshift(最后一个订单)；这个。move()；}, /**点击某项*/choose:函数{ var=thisvar id=e . CurrentTarget。数据集。id；var阶=那个。数据。秩序；定义变量索引=0;for(var I=0；一、订单长度；I){ if(id==order[I]){ index=I；打破；} } if(索引。数据。ice enter){ for(var I=0；那个。数据。冰中心指数；我){这个。数据。数据。推(这个。数据。数据。shift())；//获取第一个放到最后一个这个。数据。秩序。卸下(这个。数据。秩序。pop())；//这个。right()} } else if(索引那个。数据。ice enter){ for(var I=0；我索引-那个。数据。冰中心；我){这个。数据。数据。卸下(这个。数据。数据。pop())；//获取最后一个放到第一个这个。数据。秩序。推(这个。数据。秩序。shift())；//这个。left()；} }这个。move()；}, /**新的排列复制到新的数组中*/__set__:函数(){ var=thisvar阶=那个。数据。秩序；var数据=那个。数据。数据；for(var I=0；我。数据长度；我){那个。setdata({[' order[' I ']']: data[I]).id }) } }，//手指触发开始移动moveStart:函数{控制台。日志(e)；var startX=e.changedTouches[0].这是。setdata({ startX : startX })；}, //手指触摸后移动完成触发事件moveItem:函数{控制台。日志(e)；变量=这个；var endX=e.changedTouches[0].这是。setdata({ ENDx : ENDx })；//计算手指触摸偏移剧距离var moveX=这个。数据。startx-这个。数据。endx//向左移动if(moveX 20){这个。left()；} if(moveX-20){ this。右()；} },})欢迎参考！

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