動態設置scroll-view高度

直接上乾貨

wxml頁面

<scroll-view class='scroll-view' style="height: {{scrollViewHeight}}px" 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)
    });