【微信小程序】解决 竖向<scroll-view>组件 “竖向滚动页面出现遮挡”问题

本文介绍了一种在使用ScrollView组件时遇到的遮挡问题及其解决方案。通过对页面布局的高度进行动态调整,成功避免了内容被遮挡的情况。

问题图:

问题原因:

  <scroll-view class="scroll-container" upper-threshold="{{sortPanelDist}}"  scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">

 

其中,style="height:{{scrollHeight}}px;"  属性设置不够,导致出现遮挡。

剖析:首页没有出现这样,在其他tarbar页才出现。

解决:

  onLoad: function (options) {
    var that = this;
    //获取系统的参数,scrollHeight数值,微信必须要设置style:height才能监听滚动事件
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          scrollHeight: parseInt(res.windowHeight)+200
        })
      }
    });
  },

//给获取的系统高度,再加上200px

完美解决。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值