• 动态计算scroll-view的高度(滚动条的高度)


        //获取滚动条可滚动高度
        wx.getSystemInfo({ 
          success: (res) => {
            let screenHeight = wx.getSystemInfoSync().windowHeight //获取屏幕高度
            // 通过query 获取其余盒子的高度
            let query = wx.createSelectorQuery().in(this)
            query.select('.bgc').boundingClientRect()
            query.select('.bgcgray').boundingClientRect()
            query.select('.container').boundingClientRect()
            query.select('.foot_submit_bar').boundingClientRect()
             // 通过query.exec返回的数组 进行减法 同时 去除margin 和border的
            query.exec(res => {
              let bgcHeight = res[0].height
              let bgcgrayHeight = res[1].height
              let containerHeight = res[2].height
              let footHeight = res[3].height
              screenHeight = screenHeight - bgcHeight - bgcgrayHeight - containerHeight - footHeight - 64
              console.log(screenHeight, 'screenHeight')
              this.setData({
                clientHeight: screenHeight
              });
            })
            // this.setData({
            //   clientHeight: res.windowHeight - 108
            // });
          }
        });
        <view class='r_first_category' style='160rpx'>
                // 因为scroll-view必须得给定一个高度 这个高度在不同手机下 需要进行动态计算 因为很多盒子是不设置高的 <scroll-view scroll-y style='height:{{clientHeight*2}}rpx;'> <view class="r_item {{itemIndex === index ? 'item_active':'' }}" wx:for="{{category_list}}" wx:key='index' data-id="{{item.category_id}}" data-index="{{index}}" bindtap='navChange'> {{item.short_name =='' ? item.category_name:item.short_name}} </view> <!-- // 补一个虚拟的盒子顶住下处 --> <view style="margin-top:4rpx;" class='no_more'></view> </scroll-view> </view>
  • 相关阅读:
    美的觉醒
    jquery中ajax使用error调试错误的方法
    VC项目开发之单文档多视图实现-非分割窗口[转]
    MFC常见问题解惑[转]
    计算机视觉、机器学习相关领域论文和源代码大集合[转]
    C++成员变量、构造函数的初始化顺序 [转]
    VC中常用的宏[转]
    (VC)解决绘图时闪烁问题的一点经验[转]
    C++的辅助工具介绍 [转]
    [GUI]界面开发类库-Ribbon风格 [转]
  • 原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/12787225.html
Copyright © 2020-2023  润新知