要有遥不可及的梦想，也要有脚踏实地的本事。----------- 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})}}},})
写到这一步已经可以去看一下效果应该已经实现了，好了分享到此结束了，希望能帮助到一些朋友吧，有问题的朋友请在下方留言。
