微信小程序仿支付宝年账单页面滑动的效果展示

要有遥不可及的梦想，也要有脚踏实地的本事。———– 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
        })
      }
    }
  },
})

写到这一步已经可以去看一下效果应该已经实现了，好了分享到此结束了，希望能帮助到一些朋友吧，有问题的朋友请在下方留言。