小程序当中的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
       });
    })```

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