小程序總結(八)-獲取某個元素或組件距離頂部的初始高度

給元素加一個id

然后使用

wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id      // 節(jié)點的ID
      rect.dataset // 節(jié)點的dataset
      rect.left    // 節(jié)點的左邊界坐標
      rect.right   // 節(jié)點的右邊界坐標
      rect.top     // 節(jié)點的上邊界坐標
      rect.bottom  // 節(jié)點的下邊界坐標
      rect.width   // 節(jié)點的寬度
      rect.height  // 節(jié)點的高度
}).exec()
如果你想在頁面滾動到某個元素的時候,固定導航欄,就可以使用。

如果在onLoad()方法里面使用,可以獲取該元素剛加載時的位置信息。
如果在OnPageScroll()方法里面使用,可以實時獲取該元素的位置信息,特別是高度,因為我們要用到,去判斷滾動到某個臨界值的時候做出一些樣式變化或者變化。

    onPageScroll: function (e) {
        this.setData({
            scrollTop: e.scrollTop
        })
        let query = wx.createSelectorQuery()
        query.select('#index-nav').boundingClientRect( (rect) => {
            let top = rect.top
            if (top <= 53) {  //臨界值,根據(jù)自己的需求來調(diào)整
                this.setData({
                    fixedNav: true,    //是否固定導航欄
                    showToTop: true  //是否回到臨界值的狀態(tài)
                })
            } else {
                this.setData({
                    fixedNav: false,
                    showToTop: false
                })
            }
        }).exec()
    },
//回到臨界值的函數(shù)
    setScrollTop() {
        let query = wx.createSelectorQuery()
        let scrollTop = this.data.scrollTop
        query.select('#index-nav').boundingClientRect((rect) => {
            let top = rect.top
            // 這里是關鍵
            wx.pageScrollTo({
                scrollTop: scrollTop + top - 56,
                duration: 0
            })
        }).exec()
    },
  //觸底加載
   onReachBottom () {
        if (this.data.AJAXLock && this.data.page < this.data.totalPage) {
            let page = this.data.page + 1
            this.setData({
                page: page
            })
            this.getLock()
            this.getHomieData()
        }
    },
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • ¥開啟¥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 7,295評論 0 17
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 28,774評論 1 45
  • 第3章 基本概念 3.1 語法 3.2 關鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,489評論 0 21
  • 一、Unity簡介 1. Unity界面 Shift + Space : 放大界面 Scene界面按鈕渲染模式2D...
    MYves閱讀 8,662評論 0 22
  • 壹 有一種男朋友叫渣男。 也有一種男朋友叫阿偉,阿偉長的一般,應該屬于偏丑的那種,個子也不高。 但是他的對象叫雨兒...
    樹下八只猴閱讀 408評論 2 1

友情鏈接更多精彩內(nèi)容