小程序页面获取滚动条高度

Posted 2020-10-31 Anne3

没有用过vue等MVVM的框架，直接开始做小程序，没有dom操作真是各种不适应，思维有时都转换不过来

想要做的效果是  很常见的滚动条超出某个元素时，该元素固定在顶部

网上看到的获取滚动条高度及返回顶部的代码

onPageScroll:function(e){ // 获取滚动条当前位置
    console.log(e)
},
goTop: function (e) {  // 一键回到顶部
 if (wx.pageScrollTo) {
    wx.pageScrollTo({
      scrollTop: 0
    })
  } else {
    wx.showModal({
      title: ‘提示‘,
      content: ‘当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。‘
    })
  }
}　　

在api上实在找不到在没有任何触发情况下获取view在视图中的位置  只能退而求其次，当点击元素时会获取到当前元素的所有信息，其中的detail.y就是在Y轴上的位置

代码如下：

<view class=‘tab-con‘ bindtap="getTabScrollTop">
    <view class="tab {{tabFixed ? ‘tab-fixed‘:‘‘}}">
      <view>二月</view>
      <view>三月</view>
      <view>四月</view>
    </view>
  </view>

 

js代码大概如下

Page({
  data: {
    tabScrollTop: 0,
    tabFixed: false
  },
  getTabScrollTop: function (e) {
    this.setData({
      tabScrollTop: e.detail.y,
    });
  },
  onPageScroll: function (e) { // 获取滚动条当前位置
      if (e.scrollTop > this.data.tabScrollTop) {
        this.setData({
          tabFixed: true
        })
      }else{
        this.setData({
          tabFixed: false
        })
      }
  },
})　　

在没有任何点击触发下，还不知道该怎么做