微信小程序回到顶部的页面标识相关处理

(一)上滑隐藏,下滑显示
1.检测开始滑动的函数写在哪里?答案是写在会发生滚动的部分,eg:列表的外盒

  // 检测滑动开始
  topMoveStart(e){
    console.log(e.touches[0].pageY)
    this.setData({
      startMove: e.touches[0].pageY
    })
    console.log(this.data.startMove)
  }

滑动的位置可以通过e.touches[0]进行取到,当最终的位置大于初始值,则下滑,则显示,如果滑动的最终位置小于初始值,则是上滑,则隐藏

  // 监视滑动过程
  topIsMoving(e){
    console.log(e.touches[0].pageY)
    let startMove = this.data.startMove, startEnd = e.touches[0].pageY;
    if (startEnd > startMove){
      this.setData({
        showTop:true
      })
    }else{
      this.setData({
        showTop: false
      })    
    }
  }

页面的简单布局

<view class='contein' bindtouchmove='topIsMoving' bindtouchstart='topMoveStart'>
hahhah
</view>
<view wx:if="{{!showTop}}" class='top-mic'></view>

页面样式

.contein{
  height: 8000rpx;
  width: 100%;
}
.top-mic{
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #e4370e;
  position: fixed;
  top: 500rpx;
  left: 20rpx;
}

初始data中的数据

  data: {
    startMove: '',
    showTop: false
  },

(二)实现点击回到顶部

页面

<view wx:if="{{!showTop}}" bindtap='toTop' class='top-mic'></view>

js,回到顶部以后,隐藏回到顶部标识

  toTop(){
    const that = this
    wx.pageScrollTo({
      scrollTop: 0,
    })
    setTimeout(()=>{
      that.setData({
        showTop:true
      })
    },100)
  }