微信小程序 scroll-view 根据内容的高度自适应

最新推荐文章于 2024-09-04 18:31:36 发布

a_靖

最新推荐文章于 2024-09-04 18:31:36 发布

阅读量1.5w

点赞数

分类专栏：微信小程序文章标签： scroll-view高度自适应 scroll-view高度设置

本文链接：https://blog.csdn.net/qq_35713752/article/details/81665551

版权

微信小程序专栏收录该内容

304 篇文章 53 订阅

订阅专栏

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：


<video autoplay src="{{videoPlayUrl}}" controls></video>
<scroll-view scroll-y style="height: {{height?height+'px':'auto'}}">
  <view class='wwww' id='www'>
    <view>111</view>
    <view>111</view>
    <view>111</view>
    <view>111</view>
    <view>111</view>
    <view>111</view>
  </view>
</scroll-view>

.wwww view{
  height: 200rpx;
  background: wheat
}

var is_1_height;
Page({

  //生命周期函数--监听页面加载
  onLoad: function(options) {
    var that=this;
    wx.getSystemInfo({
      success: function (res) {
        wx.createSelectorQuery().select('video').boundingClientRect(function (rect) {
          var is_1_height = Number(rect.height) // 节点的宽度
          that.setData({
            height: Number(res.windowHeight) - is_1_height
          });
        }).exec();
      }
    });
  }
})