翻页效果实现，小程序，H5，翻书效果

本代码是实现小程序的左右滑动，点击翻书的效果，改改在H5也可以用。

效果图：

实现代码：

  <image class="item_0" src="{{imageList[turnPage]}}" catchtouchstart='touchStart' catchtouchend="touchEnd"></image><image class="item_1" src="{{imageList[turnPage+1]}}" catchtap="ccccc"></image><image class="item_2" wx:if="{{ccccc}}" src="/images/fanye3.gif"></image>

Page({data: {windowWidth: wx.getSystemInfoSync().windowWidth, //单位pxwindowHeight: wx.getSystemInfoSync().windowHeight, //单位pximageList: ['https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3121243347,1466517104&fm=26&gp=0.jpg','https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3128924642,1107205623&fm=15&gp=0.jpg','https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1381219144,3184889911&fm=26&gp=0.jpg'], //图片数组turnPage: 0,//翻转页面},turnNext(){var turnPage =this.data.turnPage;if(turnPage>=this.data.imageList.length)returnturnPage= turnPage+1this.setData({ccccc:true})setTimeout(() => {this.setData({ccccc:false,turnPage})},700);},turnPre(){var turnPage =this.data.turnPage;if(turnPage==0)returnturnPage= turnPage-1this.setData({ccccc:true})setTimeout(() => {this.setData({ccccc:false,turnPage})},700);},bindTurn(touchX) {const that = thisconst clientX = touchXif (clientX > that.data.windowWidth / 2) {that.turnNext()} else {that.turnPre()}},touchStart(e) {　　this.data.touchDot = e.touches[0].pageX; // 获取触摸时的原点},touchEnd(e) {　　　　 var that = this;　　var touchMove = e.changedTouches[0].pageX;　　 // 向左滑动 if (touchMove - this.data.touchDot <= -40) {　　　　 //执行切换页面的方法that.turnNext() 　　　　　　}　　 // 向右滑动 else if (touchMove - this.data.touchDot >= 40){　　　　　　　　that.turnPre()　　　　}else{that.bindTurn(touchMove)}}
})

css

/*page-turning.wxss */
.item_0 {position: absolute;width: 95%;height: 95%;z-index: 1;left: 0%;bottom: 0%;
}
.item_2{position: absolute;width: 95%;height: 100%;z-index: 1;left: 0%;top: 0%;
}
.item_1 {position: absolute;width: 95%;height: 95%;z-index: 0;bottom: 0%;/* overflow: hidden; */
}

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

uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能
uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能官网提供的api进行的开发,自我感觉没啥问题,但是在不同的端上好像有的好使有的不好使,暂时不知道啥 ...
uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的播放
实现读书软件的听书功能,适配app,小程序,h5 实现效果展示功能带你包括: 章节,倒计时,上一章,下一章,播放,暂停,倍速: uniapp官方uni.createInnerAudioContext( ...
uni-app 实现 fullpage 组件（适用于微信小程序,h5等）
uni-app 实现 fullpage 组件(适用于微信小程序,h5等) 业务需求. 本文github 源码地址 1.组件 src/components/FullPage/index.vue < ...
canvas为你的天气预报添加雨雪效果 | 微信小程序
关注前端瓶子君,回复"交流" 加入我们一起学习,天天进步来源:行舟客 https://yunxiaomeng.blog.csdn.net/article/details/110 ...
每日分享(微信社区小程序/h5/圈子论坛贴吧交友/博客/社交)
1.Java单元测试实战高清PDF中文版 Java单元测试实战来自于作者多年来的单元测试实践,最初发表在阿里内网的ATA上,成为了很多阿里同学单元测试学习的必读文章.很多程序员认为单元测试会花费大量 ...
怎么设置html自动翻页,看小说怎么设置自动翻页设置自动翻页方法介绍
多看阅读器R7.4 Kindle4 版类型:阅读工具大小:68.2M语言:中文评分:10.0 标签: 立即下载现在很多人都喜欢在手机上看小说,在手机阅读软件中看书的时候,为了减少烦人的操作,想设 ...
小程序无人点单效果实现
小程序无人点单效果实现废话不多说,直接上源码: https://github.com/Unscientific-net-a-porter/- 以下皆为参考博客,可以了解一下. 微信小程序Tab切换, ...
开源版商城源码V2.0【小程序 + H5+ 公众号 + APP】
内容目录一.详细介绍二.效果展示 1.部分代码 2.效果图展示三.学习资料下载一.详细介绍这是一款轻量级.高性能.前后端分离的电商系统,,支持微信小程序 + H5+ 公众号 + APP,前后 ...
c语言小程序跑马灯,微信小程序实现跑马灯效果（完整代码）
在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码:一个人活着就是为了让更多的人更好的活着! Wxss代码:/*首页跑马灯 ...
ar 微信小程序_小程序可以实现AR效果了微信还为开发者提供了基础能力支持
[TechWeb]7月7日消息,据微信官方发布的消息,小程序可实现AR效果了,包括AR试穿.AR逛展等各种体验.同时,首个小程序AR动态试妆的美妆品牌小程序也正式落地,品牌商户和服务商也可以通过能力的 ...

翻页效果实现，小程序，H5，翻书效果

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

最新文章

热门文章