小程序实现书籍翻页效果

做的小程序中突然加了一个相册，要求相册可以点击实现翻页，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 = that.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})}}

小程序实现书籍翻页效果相关推荐

微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果效果图: 源码: <view class="mainFra ...
Android 实现书籍翻页效果----升级篇
自从之前发布了<Android 实现书籍翻页效果----完结篇 >之后,收到了很多朋友给我留言,前段时间由于事情较多,博客写得太匆忙很多细节地方没有描述清楚.所以不少人对其中的地方有不少不 ...
Android 实现书籍翻页效果----原理篇
之前看到像ipad上的ibook的模拟书籍翻页的特效感觉很炫,在android上也有像laputa和ireader等应用实现有这个特效,在网上搜索了一下好像也没有现成的例子,所以自己动手实现了一个,现 ...
Android 实现书籍翻页效果---番外篇之光影效果
By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处对于之前发布的翻页效果的源码,由于写得太匆忙,注释讲解的不多,且本人文笔较差,至使很多人对其中的很多部分不是很清楚 ...
Android 实现书籍翻页效果----完结篇
By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处之前由于种种琐事,暂停了这个翻页效果的实现,终于在这周末完成了大部分功能,但是这里只是给出了一个基本的雏形,没有添 ...
微信小程序之书籍详情页
上期我们写了静态分类的普通界面了,现在我们需要写跳转进入书籍详细信息页的静态页面了. 如果你想设置顶部导航标题栏的话,可以在json里设置这样点进去的话就导航栏就会显示出书本详情的标题了. 好了,言 ...
unity 制作书本翻页效果
unity 制作书籍翻页效果 unity C# 翻书效果 2D 真实翻页不使用插件自制实现思路: 将书本分为两边,一边一个翻页实现: 下图为书本的右面,以OA为分界线,△OAB是下一面的如上图的 ...
用AjaxPro实现无刷新翻页效果及数据库分页技术介绍
在看本文之前,建议查看本人的系列文章: <AjaxPro与服务器端交互过程中如何传值>:http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/ ...
android做题imageview缩放,巧用ViewPager实现驾考宝典做题翻页效果
效果如下所示: 思路: a.利用ViewPager自带的动画效果,略作修改,实现滑动覆盖翻页效果. b.移动时加入阴影效果. 1.关键代码如下所示: public class ReaderViewPa ...
用Cocos Creator 模拟书本翻页效果
1.简介本文主要探讨了如何使用CocosCreator来模拟书本翻页效果,分别介绍了通过使用贝塞尔曲线和verlet积分算法来模拟书页底边在翻页过程中的弯曲形变,最后通过自定义assembler传入 ...

小程序实现书籍翻页效果

小程序实现书籍翻页效果相关推荐

最新文章

热门文章