小程序实现书籍翻页效果

做的小程序中突然加了一个相册，要求相册可以点击实现翻页，web能实现这种翻页效果的插件有很多，如turn.js，类似这种插件基本都是基于jQuery的，但是小程序是不支持jQ的。参考了网上大佬的代码，实现了一个最简单的翻页效果

 

基本结构：

<view class='container'>
    <view class='page_first'>家谱相册，点击图片翻页查看</view>
    <view class='page_last'>
        <block wx:for='{{imgArr}}' wx:key='{{index}}'>
            <view class="photo_item {{item.isturn?'left':'right'}} {{'zindex'+item.zIndex}}" data-index='{{index}}' bindtap='change' bindtransitionend='finish'>
                <image src='{{item.src}}' mode='aspectFill'></image>
            </view>
        </block>
    </view>
</view>

样式： 

.container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page_first,.page_last{
    width: 50%;
    height: 480rpx;
}
.page_first{
    display:flex;
    align-item:center;
    box-sizing:border-box;
    padding:0 20rpx;
    text-align:center;
}
.page_last{
    position:relative;
}
.photo_item{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    box-sizing:border-box;
    border:1rpx solid #eee;
}
image{
    width:100%;
    height:100%;
}
.left,.right{
    transform-style:preserve-3d; /* 开启3d转换效果 */
    transform-origin:0% center;  /* 设置基点位置 */
    perspective:1000;  /* 定义3D元素距视图的距离 */
    transition:all 1.5s ease-in-out;
}
.left{
    transform:perspective(2000rpx) rotateY(-180deg);
}
.right{
    transform:perspective(2000rpx) rotateY(0deg);
}
.zindex1{
    z-index:1;
}
.zindex2{
    z-index:2;
}
.zindex3{
    z-index:3;
}

逻辑：

初始化时需要渲染的数据格式是固定，所以对请求回来的数据进行了改写。

import api from '../../../utils/api.js';
Page({
    data:{
        imgArr:[],
        flag:true,
        // 需要渲染的数据格式
        // list:[
        //     {src:'图片路径',isturn:false,zIndex:3},
        //     {src:'图片路径',isturn:false,zIndex:1},
        //     {src:'图片路径',isturn:false,zIndex:1},
        //     {src:'图片路径',isturn:false,zIndex:1},
        // ]
    },
    onLoad:function(options){
        // 获取列表图片信息
        api.photoDetail({
            query:{
                id:options.id
            }
        }).then(res =>{
            let arr = [];
            // 对返回的数据进行改写
            res.info.album.forEach((ele,index)=>{
                let obj = {};
                obj.isturn = false;
                obj.src = ele;
                if(!index){
                    obj.zIndex = 3
                }else{
                    obj.zIndex = 1
                }
            })
        })
    },
    // 点击图片切换类名来控制翻页效果
    change(e){
        if(this.data.flag){
            this.data.flag = true;
        
            let index=e.currentTarget.dataset.index;
            let imgs = that.data.imgArr;
            imgs.map((ele,i)=>{
                if(index==i){
                    imgs[i].isturn = !imgs[i].isturn;
                    imgs[i].zIndex = 3;
                }else{
                    imgs[i].zIndex = 1;
                }
            })
            if(index-1>=0){
                imgs[index-1].zIndex = 2;
            }
            if(index+1<imgs.length){
                imgs[index+1].zIndex = 2;
            }
        }
        this.setData({
            imgArr:imgs
        })
    },
    // transition动画结束
    finish(){
        this.data.flag=true;
    }
})

测试后发现开发工具上没有问题，但是在真机上就出现了小问题。发现当点击图片进行翻页时，下一张图片会有一下闪现。觉得应该是因为在进行初始化的时候，所有的图片容器都是定位在一起的，只有第一张的层级最高（这里设置的z-index是3），后面的图片容器的层级都是z-index为1，导致后面的图片会覆盖到前面的图片，即原本图片顺序应该是12345显示，现在是15432显示，点击图片执行事件需要时间，所以最后一张图片会闪现一下

效果图（真机）：

修改 ：确保要点击的图片的下一张图片的层级在剩余图片中最高，且要点击的图片后第二张的层级在剩余图片层级第二高。即ABCDE一组图片，在点击B之前，B图片层级为3（在BCDE中最高），C的层级为2（BCDE中第二高）

1、wxss新加样式

.zindex4{
    z-index:4;
}

2、逻辑上的处理

    data:{
        imgArr:[],
        // 需要渲染的数据格式
        // list:[
        //     {src:'图片路径',isturn:false,zIndex:4},
        //     {src:'图片路径',isturn:false,zIndex:3},
        //     {src:'图片路径',isturn:false,zIndex:1},
        //     {src:'图片路径',isturn:false,zIndex:1},
        //     {src:'图片路径',isturn:false,zIndex:1},
        // ]
    },
    // 获取数据列表
    api.photoDetail({
        query:{
            id:options.id
        }
    }).then(res =>{
        let arr = [];
        // 对返回的数据进行改写
        res.info.album.forEach((ele,index)=>{
            let obj = {};
            obj.isturn = false;
            obj.src = ele;
            if(!index){
                obj.zIndex = 4
            // 在数据初始化的时候就把第二张图片的层级提升
            }else if(index==1){
                obj.zIndex = 3
            }else{
                obj.zIndex = 1
            }
            arr.push(obj)
        })
        this.setData({
            imgArr:arr
        })
    }),
    // 点击图片切换类名来控制翻页效果
    change(e){
        if(this.data.flag){
            this.data.flag = true;
            let index=e.currentTarget.dataset.index;
            let imgs = this.data.imgArr;
            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
            })
        }
    }