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

比眉伴天荒 2023-06-09 11:28 25阅读 0赞

--------------------

**要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)**

--------------------

近来要做一个年账单页面，类似于支付宝年账单，就是对一年下单的总结，但是支付宝页面滑动的效果在小程序上是有些bug的，柚子也是研究了很久了，但自认还算完美吧，下面把过程说一下，希望能对某些朋友有所帮助：

**1、**首先要有页面滑动动画的效果，就必须要监听页面的滚动，监听你手指是向上还是向下滑动的，这里柚子是用的bindtouchstart，bindtouchmove，他可以监听你手指的动作

bindtouchstart开始滑动，bindtouchmove正在滑动，bindtouchend结束滑动

但是在这之前你还要做一个操作，因为你只是要感受到手指滑动的动作，并不是要让页面真的滑动，所以我们要先将页面滑动效果给禁止掉，而禁止的方法就是catchtouchmove

**2、**写好之后，第二步，我们就可以先在这个里面去写页面了，比如说一共有四页，那么可以这样写：

.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
            })
          }
        }
      },
    })

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