微信小程序之scroll-view自适配屏幕高度解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序之scroll-view自适配屏幕高度解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求说明：

一般用于列表数据的展示（带有搜索框），根据官方文档，scroll-view需要固定一个高度，那么，对于不同的手机分辨率来说，可能显示的效果就不一样了，有的没到底，有的显示不全等等

解决方案：

不同的手机，但是可以通过计算，获取到scroll-view的填充高度。

页面效果：

scrollview高度自适应,微信小程序,微信小程序,javascript,小程序

具体方法：文章来源地址https://www.toymoban.com/news/detail-523325.html

// 第一步 先取出页面高度 windowHeight
    wx.getSystemInfo({
      success: function(res) {
          self.setData({
              windowHeight: res.windowHeight
          });
      }
    });
    // 第二步 然后取出 搜索框布局 的高度
    // 根据文档，先创建一个SelectorQuery对象实例
    let query = wx.createSelectorQuery().in(self);
    // 然后逐个取出节点信息
    // 选择器的语法与jQuery语法相同
    query.select('#id_v_search').boundingClientRect();
    // 执行上面所指定的请求，结果会按照顺序存放于一个数组中，在callback的第一个参数中返回
    query.exec((res) => {
      // 取出 搜索框布局 的高度
      let reduceHeight = res[0].height;
      // 然后就是做个减法
      let scrollViewHeight = self.data.windowHeight - reduceHeight;
      // 算出来之后存到data对象里面
      self.setData({
        scrollViewHeight: scrollViewHeight
      });
    });

<view id="id_v_search" class="v_title">搜索框布局</view>
<scroll-view class="s_view" style="height: {{scrollViewHeight}}px;" scroll-y="true" bindscrolltolower="loadMoreData">
  <block wx:for="{{dataList}}" wx:key="index">
    <view class="v_item">{{item.title}}</view>
  </block>
</scroll-view>

到了这里，关于微信小程序之scroll-view自适配屏幕高度解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！