动态设置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)
    });

猜你喜欢

转载自blog.csdn.net/qq_35775675/article/details/105769796