微信小程序scroll-view滑动的时候滑动到指定位置-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序scroll-view滑动的时候滑动到指定位置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果实现

1.滑动的时候调动滑动事件bindscroll="scroll"

<view style="position: fixed;z-index: 100;" wx:if="{{content.isShow}}">
    我要在头部定义的标题栏
</view>

<scroll-view  scroll-y="true" bindscroll="scroll"  scroll-with-animation scroll-top="{{scrolltop}}">
  <view>这里面是你的一大堆内容</view>
</scroll-view>

scroll-with-animation 过渡动画

scroll-top="{{scrolltop}}" 距离顶部多少高度

2.在调用scroll里面的事件函数

 data: {
   content: {
      isShow: false
    },
    scrolltop:0,
 }

这里使用的是获取手机屏幕大小的宽度res.screenWidth来自适应头部悬浮的位置的显示与隐藏

微信小程序scroll-view滑动的时候滑动到指定位置,微信小程序,微信小程序,Powered by 金山文档

opacity:( 1 - e.detail.scrollTop / 100 / 3).toFixed(2) 目的是为了页面上划或者下划的时候实现渐显渐隐效果，但是页面调用的时候卡动，所以就直接去除掉了这个效果.文章来源地址https://www.toymoban.com/news/detail-595974.html

scroll: function(e:any) {
      const res = wx.getSystemInfoSync()
      if(res.screenWidth <= 330){
        if (e.detail.scrollTop >= 300) {
          if (!this.data.content.isShow) {
            this.setData({
              'content.isShow': true
            })
          }
        } else {
          if(e.detail.deltaY < 0){
            // console.log("向下滑动")
            // opacity:( 1 - e.detail.scrollTop / 100 / 3).toFixed(2)
            this.setData({scrolltop:300})
          }else{
            // console.log("向上滑动")
            this.setData({scrolltop:0})
          }
          if (this.data.content.isShow) {
            this.setData({
              'content.isShow': false
            })
          }
        }
      }else if(res.screenWidth > 330 && res.screenWidth <= 365){
        if (e.detail.scrollTop >= 330) {
          if (!this.data.content.isShow) {
            this.setData({
              'content.isShow': true
            })
          }
        } else {
          if(e.detail.deltaY < 0){
            this.setData({scrolltop:330})
          }else{
            this.setData({scrolltop:0})
          }
          if (this.data.content.isShow) {
            this.setData({
              'content.isShow': false
            })
          }
        }
      }else if(res.screenWidth > 365 && res.screenWidth <= 420){
        if (e.detail.scrollTop >= 377) {
          if (!this.data.content.isShow) {
            this.setData({
              'content.isShow': true
            })
          }
        } else {
          if(e.detail.deltaY < 0){
            this.setData({scrolltop:377})
          }else{
            this.setData({scrolltop:0})
          }
          if (this.data.content.isShow) {
            this.setData({
              'content.isShow': false
            })
          }
        }
      }else{
        if (e.detail.scrollTop >= 395) {
          if (!this.data.content.isShow) {
            this.setData({
              'content.isShow': true
            })
          }
        } else {
          if(e.detail.deltaY < 0){
            this.setData({scrolltop:395})
          }else{
            this.setData({scrolltop:0})
          }
          if (this.data.content.isShow) {
            this.setData({
              'content.isShow': false
            })
          }
        }
      }
    },