第微信小程序?qū)崿F(xiàn)卡片層疊滑動(dòng)本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)卡片層疊滑動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

實(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

view

viewid="slide"bindtouchstart='moveStart'bindtouchend='moveItem'

ul

blockwx:for="{{datas}}"

lianimation="{{item.animation}}"

bindtap="choose"data-id="{{item.id}}"

imagesrc="{{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-repeatcentertop;*/

background-size:cover;

position:relative;

overflow:hidden;

.teachers_b{

position:relative;

margin-top:130px;

#slide{

margin:0auto;

width:100%;

height:330px;

position:relative;

image{

width:200rpx;

height:200rpx;

#slideli{

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:0020px#1d374d;

#slideliimg{

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_righth3{

font:40030px/18px"MicrosoftYahei";

color:#222222;

.slide_righth3span{

display:inline-block;

margin-left:10px;

font:40014px/36px"MicrosoftYahei";

color:#555555;

.slide_rightp{

padding:20px030px;

color:#555555;

font:40014px/24px"MicrosoftYahei";

border-bottom:1pxsolid#dbdbdb;

.slide_rightdl{

padding-top:30px;

.slide_rightdd{

float:left;

width:33.3%;

color:#777;

font:40012px/24px"MicrosoftYahei";

.slide_rightddh3{

color:#ff9000;

margin-bottom:20px;

.arrow{

/*display:none;*/

.arrow.prev,

.arrow.next{

position:absolute;

width:64px;

top:38%;

z-index:9;

font:70096px'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({

/**

*頁面的初始數(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)聽頁面加載

*/

onLoad:function(options){

this.__set__();

this.move();

/**

*生命周期函數(shù)--監(jiān)聽頁面初次渲染完成

*/

onReady:function(){

/**

*生命周期函數(shù)--監(jiān)聽頁面顯示

*/

onShow:function(){

/**

*生命周期函數(shù)--監(jiān)聽頁面隱藏

*/

onHide:function(){

/**

*生命周期函數(shù)--監(jiān)聽頁面卸載

*/

onUnload:function(){

/**

*頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作

*/

onPullDownRefresh:function(){

/**

*頁面上拉觸底事件的處理函數(shù)

*/

onReachBottom:function(){

/**

*用戶點(diǎn)擊右上角分享

*/

onShareAppMessage:function(){

move:function(){

vardatas=this.data.datas;

/*圖片分布*/

for(vari=0;idatas.length;i++){

vardata=datas[i];

varanimation=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(){

//

varlast=this.data.datas.pop();//獲取數(shù)組的最后一個(gè)

this.data.datas.unshift(last);//放到數(shù)組的第一個(gè)

varorderFirst=this.data.order.shift();

this.data.order.push(orderFirst);

this.move();

/***/

right:function(){

varfirst=this.data.datas.shift();//獲取數(shù)組的第一個(gè)

this.data.datas.push(first);//放到數(shù)組的最后一個(gè)位置

varorderLast=this.data.order.pop();

this.data.order.unshift(orderLast);

this.move();

/**點(diǎn)擊某項(xiàng)*/

choose:function(e){

varthat=this;

varid=e.currentTarget.dataset.id;

varorder=that.data.order;

varindex=0;

for(vari=0;iorder.length;i++){

if(id==order[i]){

index=i;

break;

}

}

if(indexthat.data.iCenter){

for(vari=0;ithat.data.iCenter-index;i++){

this.data.datas.push(this.data.datas.shift());//獲取第一個(gè)放到最后一個(gè)

this.data.order.unshift(this.data.order.pop());

//this.right()

}

}elseif(indexthat.data.iCenter){

for(vari=0;iindex-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(){

varthat=this;

varorder=that.data.order;

vardatas=