1. 程式人生 > >小程序頁面獲取滾動條高度

小程序頁面獲取滾動條高度

esc -c 效果 情況 this 視圖 適應 頂部 頁面

沒有用過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
        })
      }
  },
})  

在沒有任何點擊觸發下,還不知道該怎麽做

小程序頁面獲取滾動條高度