微信小程序中scoll-view的一个小坑

在微信小程序开发中，有时候swiper-view会出现显示不全的问题，我们可以用scoll-view来把它包裹下，但是要用scoll-view就一定要设置height,而我们经常是在页面中加的这个组件，要怎么知道它的高度呢?我找了好多答案，最终就整理如下：

• 整理下思路：就是在页面加载后去计算出页面中已知组件的所有高度和，然后再用页面整体大小减去这个高度和。
• 先讲一下如何获取页面总体高度吧。可以用wx.getSystemInfo(Object object)或wx.getSystemInfoSync(Object object)这两个官方的API，参考官方文档

• 然后就是如何获取页面已知元素的高度和了。思路就是：选择页面中占有效高度的元素（也就是说一般只选最外层元素，不包含内容元素）。
• 关于这点，官方给的文档太过简略，对于我这样的前端新手根本学不会，所以只好百度了，找了一篇好文章可参考这里^*^
  我只写上我的代码

onLoad:function(){  
    let page = this;//保存当前页面到page对象中，因为后边要是直接用this,就不是当前page对象了
    //创建节点查询对象
    let obj = wx.createSelectorQuery();

    //选择页面中占有效高度的元素，这个select()里边写的是css的选择器
    //boundingClientRect()是取得元素的信息，但这里只是写了命令，放到exec()中批处理
    obj.select(".topbar").boundingClientRect();
    obj.select(".top_message").boundingClientRect();
    obj.select(".title").boundingClientRect();
    obj.select(".linebetween").boundingClientRect();
//exec(callbackFunction(){}),意思是执行上边的代码
    obj.exec((res) => {
        for (let i = 0; i < res.length; i++) {
    //批量执行完上边的代码后会产生一个数组，一次对应上边命令返回的对象
          eleHeight += res[i].height;
          console.log(res[i].height);
        }
    //给页面变量赋值
        page.setData({
          scroll_height: (page.data.winHeight - eleHeight - 50-20)*2
        })
}

转载于:https://www.cnblogs.com/Lyn4ever/p/11140694.html