微信小程序动态获取scroll-view的高度

微信小程序动态获取scroll-view的高度

本来想今天给大家写一个上传一个单图片或者多图片的封装函数,奈何今天起得晚,还要上班,就给大家介绍一个动态获取scroll-view的高度的方法。

在我们做商城或者文章列表时我们经常会使用scroll-view这个组件。官方是这么介绍scroll-view
scroll-view

当我们使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。
但是由于设备的不一样,怎么动态的给scroll-view高度呢

于是我封装了一个方法来动态获取scroll-view的高度,并且适配一切设备

方法如下

function rem(height, successData){
  //获取设备信息
  wx.getSystemInfo({
    success:(res)=>{
      //判断是否传入高度
      if(height!=null&&height!=undefined&&height!=''){
        //如果传入高度则用设备的高度减去设备宽度除以设计图的宽度750再乘以传参进来的高度
        var myheight =res.windowHeight-res.windowWidth/750*height
      }else{
        //如果没有传入高度则直接等于设备高度
        var myheight = res.windowHeight
      }
      //调用成功函数并把算出来的高度传出去
      successData(myheight)
    },
    fail: function(res) {},
    complete: function(res) {},
  })
}

这个方法的用法就是当你需要用scroll-view的时候你只需要算出其他容器的宽度,然后换算出来的就是设备的高度减去其他容器的总高度。
建议放在config.js这个公共文件里,调用的时候引入全局调用
例如

config.rem(400,(res)=>{
    this.setData({
        scrollV:res
    })
})

得到的这个scrollV就是已经兼容和适配好的scroll-view的高度。最后的单位是px。
感谢大家阅读,谢谢大家,我是小九。做自己喜欢做的事。

猜你喜欢

转载自blog.csdn.net/m0_37938910/article/details/81140829