要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)
近来要做一个年账单页面,类似于支付宝年账单,就是对一年下单的总结,但是支付宝页面滑动的效果在小程序上是有些bug的,柚子也是研究了很久了,但自认还算完美吧,下面把过程说一下,希望能对某些朋友有所帮助:
1、首先要有页面滑动动画的效果,就必须要监听页面的滚动,监听你手指是向上还是向下滑动的,这里柚子是用的bindtouchstart,bindtouchmove,他可以监听你手指的动作
<view bindtouchstart="handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend"></view>
bindtouchstart开始滑动,bindtouchmove正在滑动,bindtouchend结束滑动
但是在这之前你还要做一个操作,因为你只是要感受到手指滑动的动作,并不是要让页面真的滑动,所以我们要先将页面滑动效果给禁止掉,而禁止的方法就是catchtouchmove
<view class="boxs" catchtouchmove="noneEnoughPeople"><view bindtouchstart="handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend"></view></view>
2、写好之后,第二步,我们就可以先在这个里面去写页面了,比如说一共有四页,那么可以这样写:
<view class="boxs" catchtouchmove="noneEnoughPeople"><view bindtouchstart="handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend"><view class="box1">第一页</view><view class="box2">第二页</view><view class="box3">第三页</view><view class="box4">第四页</view></view></view>
.boxs {width: 100%;height: 100%;position: absolute;}.box1 {width: 100%;height: 100%;background: #2da4a8;position: absolute;top:0;display: flex;align-items: center;justify-content: center;}.box2 {width: 100%;height: 100%;background: #2da4a8;position: absolute;top: 100%;display: flex;align-items: center;justify-content: center;}.box3 {width: 100%;height: 100%;background: #2da4a8;position: absolute;top: 200%;display: flex;align-items: center;justify-content: center;}.box4 {width: 100%;height: 100%;background: #2da4a8;position: absolute;top: 300%;display: flex;align-items: center;justify-content: center;}
3、页面搭建好之后开始写js
Page({/*** 页面的初始数据*/data: {lastY: 0,//监听滑动动作的记录数据page: 1,//定义一个页面,我们需要知道当前页面是第几页text: ''//这是一个判断向上和向下滑动的数据},noneEnoughPeople() {//禁止页面滑动的方法,可以不做任何操作,但是必须要写},//滑动开始的操作,记录滑动开始的位置,用于判断是向上滑动还是向下滑动handletouchtart: function(event) {// 赋值this.data.lastY = event.touches[0].pageY},//滑动中,判断是向上还是向下handletouchmove(event) {let currentY = event.touches[0].pageY;let ty = currentY - this.data.lastY;if (ty < 0) {this.setData({text: '向上'})} else {this.setData({text: '向下'})}this.data.lastY = currentY},//滑动结束,通过判断是向上还是向下来计算页面滚动的位置handletouchend(event) {console.log(this.data.text, this.data.page)if (this.data.text == '向上') {if (this.data.page == 1) {wx.pageScrollTo({scrollTop: wx.getSystemInfoSync().windowHeight,duration: 500})this.setData({page: 2})} else if (this.data.page == 2) {wx.pageScrollTo({scrollTop: wx.getSystemInfoSync().windowHeight * 2,duration: 500})this.setData({page: 3})} else if (this.data.page == 3) {wx.pageScrollTo({scrollTop: wx.getSystemInfoSync().windowHeight * 3,duration: 500})this.setData({page:4})}} else {if (this.data.page == 2) {wx.pageScrollTo({scrollTop: 0,duration: 500})this.setData({page: 1})} else if (this.data.page == 3) {wx.pageScrollTo({scrollTop: wx.getSystemInfoSync().windowHeight,duration: 500})this.setData({page: 2})} else if (this.data.page == 4) {wx.pageScrollTo({scrollTop: wx.getSystemInfoSync().windowHeight * 2,duration: 500})this.setData({page: 3})}}},})
写到这一步已经可以去看一下效果应该已经实现了,好了分享到此结束了,希望能帮助到一些朋友吧,有问题的朋友请在下方留言。