微信小程序回到顶部的页面标识相关处理-即速应用

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

浏览量：3585 时间：2020-01-11 来源：Seeyoucm

(一)上滑隐藏,下滑显示
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>

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

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。