欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

微信小程序之卡片層疊滑動(dòng)效果

2019-6-26 seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

微信小程序之卡片層疊滑動(dòng)效果

代碼：
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/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: []
},

/**
* 生命周期函數(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();
}
},
})

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}}" style="z-index: {{item.zIndex}} ;opacity:{{item.opacity}};" 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.左右滑動(dòng)時(shí)，向相應(yīng)方向移動(dòng)一個(gè)卡片位置；
2.點(diǎn)擊某一項(xiàng)時(shí)，將點(diǎn)擊項(xiàng)位置移動(dòng)到中間位置；