小程序當中的scroll-view的自適應當前屏幕高度

1.在製作小程序頁面當中我們肯定會遇到頁面滾動的問題,對於解決這樣的問題小程序已經給我們提供好組件
2.對於可滾動視圖區域,使用豎向滾動時,需要給一個固定高度,通過wxss設置heigh高度,組件屬性的長度單位默認爲px,
scroll-view鏈接
3.在小程序的.js文件中在data中進行定義相應的數據

     windowHeight: 0,
     //flow_head的高度
     headHeight: 0,
     // flow_info的高度
     infoHeight: 0,
     // scroll-view的高度
     scrollViewHeight: 0

      success: function(res) {
        console.log(res)
        that.setData({
          windowHeight:res.windowHeight
        })
      }
    });
    let query = wx.createSelectorQuery().in(this);
    頁面上其他盒子在當前頁面的高度
    query.select('.flow_head').boundingClientRect();
    query.select('.flow_info').boundingClientRect();
    query.exec((res)=>{
       // 分別取出headHeightr和infoHeight的高度
       let headHeight = res[0].height;
       let infoHeight = res[1].height;
      console.log(headHeight,infoHeight)
       // 然後就是做個減法
       let scrollViewHeight = this.data.windowHeight - headHeight - infoHeight-70;
       // 算出來之後存到data對象裏面,結果就是滾動區域的高度
       that.setData({
           scrollViewHeight: scrollViewHeight
       });
    })```

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章