一、把子元素的高度賦給scroll-view
先說一下兩個(gè)知識(shí)點(diǎn)：wx.getSystemInfo()甘穿、wx.createSelectorQuery()
wx.getSystemInfo()
1552613741(1).jpg
//創(chuàng)建節(jié)點(diǎn)選擇器
wx.createSelectorQuery()
//獲取子節(jié)點(diǎn)信息
select(‘節(jié)點(diǎn)名’).boundingClientRect()
//wxml
<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>
</scroll-view>
//wxss
.wwww view{
height: 200rpx;
background: wheat
}
//js
//生命周期函數(shù)--監(jiān)聽頁面加載
onLoad: function(options) {
var that=this;
wx.getSystemInfo({
success: function (res) {
wx.createSelectorQuery().select('#www').boundingClientRect(function (rect) {
var is_1_height = Number(rect.height) // 節(jié)點(diǎn)的寬度
that.setData({
height: is_1_height
});
}).exec();
}
});
}
二吠勘、自適應(yīng)不同高度的手機(jī)
onLoad: function (options) {
let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度
let windowWidth = wx.getSystemInfoSync().windowWidth // 屏幕的寬度
this.setData({
height: windowHeight * 750 / windowWidth - (本頁面除了scroll以外其他組件的高度rpx) - 30
})
}
