验证中...
Languages: 微信
Categories: 微信开发
Latest update 2019-06-13 18:50
turn.wxml
Raw Copy
<view class='main'>
<view class='page_first'>
家谱相册,点击图片翻页查看
</view>
<view class='page_last'>
<view class='photo_item {{item.isturn? "left":"right" }} {{"zindex" + item.zIndex}}' bindtap='setclass' data-index="{{index}}" wx:for="{{imgArr}}" bindtransitionend='end' wx:key='{{index}}'>
<image src='{{item.src}}' mode='aspectFill'></image>
</view>
</view>
</view>
turn.wxss
Raw Copy
page {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.main {
display: flex;
align-items: center;
justify-content: center;
width: 96%;
margin: 0 auto;
}
.main .page_first, .main .page_last {
width: 50%;
height: 480rpx;
background-color: white;
}
.main .page_first {
height: 480rpx;
display: flex;
align-items: center;
text-align: center;
}
.page_last {
position: relative;
width: 50%;
}
.photo_item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
image {
width: 100%;
height: 100%;
}
.left, .right {
transform-style: preserve-3d;
perspective: 1000;
transition: all 1.5s ease-in-out;
}
.left {
transform-origin: 0% 50%;
transform: perspective(1000px) rotateY(-180deg);
}
.right {
transform-origin: 0% 50%;
transform: perspective(1000px) rotateY(0deg);
}
.zindex1 {
z-index: 1;
}
.zindex2 {
z-index: 2;
}
.zindex3 {
z-index: 3;
}
.zindex4 {
z-index: 4;
}
turn.js
Raw Copy
// pages/trun/turn.js
Page({
/**
* 页面的初始数据
*/
data: {
// 数据格式固定,前两个的zIndex必须是最高的和第二高
imgArr: [
{ src: "/images/1.jpg", isturn: false, zIndex: 4 },
{ src: "/images/2.jpg", isturn: false, zIndex: 3 },
{ src: "/images/3.jpg", isturn: false, zIndex: 1 },
{ src: "/images/4.jpg", isturn: false, zIndex: 1 },
{ src: "/images/5.jpg", isturn: false, zIndex: 1 },
],
flag:true
},
setclass: function (e) {
if(this.data.flag){
this.data.flag=false;
let imgs = this.data.imgArr;
let index = e.currentTarget.dataset.index;
imgs.map((ele,i)=>{
if (index == i) {
imgs[i].isturn = !imgs[i].isturn;
imgs[i].zIndex = 4;
} else {
imgs[i].zIndex = 1;
}
})
if (index - 1 >= 0) {
imgs[index - 1].zIndex = 3;
}
if (index + 1 < imgs.length) {
imgs[index + 1].zIndex = 3;
}
if (index - 2 >= 0) {
imgs[index - 2].zIndex = 2;
}
if (index + 2 < imgs.length) {
imgs[index + 2].zIndex = 2;
}
this.setData({
imgArr: imgs,
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
start(){
console.log('动画开始')
},
end(e){
this.data.flag=true
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
gifhome_480x960_10s-(1).gif

Comment list( 0 )

You need to Sign in for post a comment

Help Search

Gitee_you_jiang_zheng_wen Zheng_wen_close