小程序之scroll-view组件scroll-y失效

最新推荐文章于 2024-08-09 16:56:42 发布

LGDmar

最新推荐文章于 2024-08-09 16:56:42 发布

阅读量3.2k

点赞数

本文链接：https://blog.csdn.net/LGDmar/article/details/106145199

版权

开始我以为是小程序scroll-view组件scroll-y失效，查了很多网上说的都没有确切的解决掉问题

下面是我写的代码

 <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{VerticalNavTop}}" style="height:calc(100vh - ({{topHeight}}px + 50px))">
          <view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{list}}" wx:key bindtap='tabSelect' data-id="{{index}}">
            科室-{{item.name}}
          </view>
</scroll-view>

刚开始查询问题的时候，网上都说是scroll-view高度设置的有问题，我这边高度是通过微信wx.getSystemInfo接口获取的手机型号页面高度布局生成的下拉框列表如下图所示 100vh是手机视图窗口的高度也就是页面布局的 100%;

结果排查获取手机页面顶部高度的时候发现部分机型获取不到页面高度刚开始在app.js中全局获取，到局部页面调用的时候就为NAN

onLaunch: function () {
    let that = this;
    //获取手机页面高度,设置头部高度
    wx.getSystemInfo({
      success: e => {
        that.globalData.StatusBar = e.statusBarHeight;
        let custom = wx.getMenuButtonBoundingClientRect();
        if (custom) {
            that.globalData.Custom = custom;  
            that.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
            that.globalData.topHeight = custom.bottom + custom.top;
        } else {
            that.globalData.CustomBar = e.statusBarHeight + 40;
        }
      }
    })
  },

然后又去查询了部分机型获取不到手机页面高度的处理方法，得到如下处理方式

再局部页面js中添加渲染视图初始化时重新再进行获取手机页面高度

 onReady: function () {
    let that = this;
    wx.getSystemInfo({
        success: res => {
          let custom = wx.getMenuButtonBoundingClientRect();
          if (custom) {
              that.setData({
                topHeight:custom.bottom + custom.top - res.statusBarHeight
              })
          } else {
              that.setData({
                topHeight:custom.bottom + res.statusBarHeight + 40
              })
          }
        }
    })
  },

问题解决