动态设置scroll-view高度

Posted 2023-02-22 熬夜的小青年

直接上干货

wxml页面

<scroll-view class='scroll-view' style="height: scrollViewHeightpx" scroll-y wx:if="cardIndex==1" bindscrolltolower="scrolltolowerRecordsData">
    <view style="padding: 40rpx 30rpx 0;">
      <view class="listbox" wx:for="records" wx:key="records">
        <view class="listboxl">
          <view class="listboxlt">
            tools.substring(item.title, 10)
          </view>
          <view class="listboxlb">
            tools.substring(item.content, 18)
          </view>
        </view>
        <view class="listboxr">
          <image src='item.img'></image>
        </view>
      </view>
    </view>
  </scroll-view>

js页面

// 先取出页面高度 windowHeight
    wx.getSystemInfo(
      success: (res)=> 
        this.setData(
          windowHeight: res.windowHeight
        );
      
    );

    // 创建SelectorQuery对象实例
    let query = wx.createSelectorQuery().in(this);

    query.select('#top').boundingClientRect();

    // 执行exec函数 返回查询的元素信息
    query.exec((res) => 
      //获取高度
      let topHeight = res[0].height;

      // 计算高度
      let scrollViewHeight = this.data.windowHeight - topHeight;

      // 保存高度
      this.setData(
        scrollViewHeight: scrollViewHeight
      );
      console.log(scrollViewHeight)
    );