小程序填坑日記之獲取view高度

這兩天UI提了一種交互效果,希望頁面滾動到某個位置的時候讓一個按鈕fix住,而這個位置時不定高度的,這個位置會根據當前頁面的內容多少而動態改變(簡而言之就是 height:auto)
廢話不多說,直接擼代碼

  • 在Page的onReady回調里獲取特定元素的高度
    這里用到了小程序api-wx.createSelectorQuery(),指定ID元素的詳細屬性會在rect的回調里返回
onReady () {
    setTimeout(() => {
      const _this = this
      wx.createSelectorQuery().select('#YOUR_ELEMEMT_ID')
        .boundingClientRect(function (rect) {
            console.log(rect)
            _this.setData({
              top: rect.top
           })
      }).exec()
    }, 300)
}
  • 有人可能會問上面代碼的定時器是干嘛的,不是已經在頁面渲染完成OnReady回調里了嗎?
  • 事實上,這里可能是小程序的bug,如果不加定時器,獲取的元素高度還是沒渲染完異步數據前的高度
  • 當獲取到高度后就可以實現滾動到某個位置進行fixed的操作了
onPageScroll (e) {
    if (this.data.top <= e.scrollTop) {
      this.setData({
        fixed: true
      })
    } else {
      this.setData({
        fixed: false
      })
    }
  }
  <!-- 這里是粗略的頁面和樣式-->
  <view class="{{fixed?'fixed':''}}" id="YOUR_ELEMENT_ID">
     在這里固定住
  </view>

 .fixed{
   position:fixed;
 }
  • 寫在最后的話:
    1. 如果有更好的解決方案請在下方留言
    2. 轉載請注明出處
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,076評論 25 708
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • 準備原材料:中排骨1斤,生抽,老抽,醋,糖,料酒 做法:把洗凈的排骨倒在鍋里,放一勺生抽,一勺老抽,一勺料酒,三勺...
    趙霞1閱讀 283評論 0 1
  • 地球上的人族,你們好,我好像是第七平行宇宙某個星域的魔法師,我在試驗一次超遠距空間魔法時出了一點小狀況,來到了你們...
    偷心魔法師閱讀 332評論 2 3
  • 離開校園走上了穩定的教師崗位,圈子相對而言很固定,三五年下來疏于思考,按部就班,終日為學生作業各種會議,班上瑣事所...
    Valerie靜水流深閱讀 649評論 6 3