微信小程式scroll-view元件自適應不同高度的手機
阿新 • • 發佈:2018-12-12
已知微信相比於H5開發有rpx這個單位可以自適應一些不同寬度的手機,但是有的時候需要自適應一些手機高度賊大的手機比如iphoneX系列
所以scroll-view的wxss樣式裡肯定不能寫死,我能想到的方法就是js裡頭載入畫面前再設定高度
wxml裡
<scroll-view scroll-y style='height:{{scroll_height}}rpx'>
// 一些標籤
</scroll-view>
js
Page({ data: { scroll_height: 0, } }) onLoad: function (options) { let windowHeight = wx.getSystemInfoSync().windowHeight // 螢幕的高度 let windowWidth = wx.getSystemInfoSync().windowWidth // 螢幕的寬度 this.setData({ scroll_height: windowHeight * 750 / windowWidth - (本頁面除了scroll以外其他元件的高度rpx) - 30 }) },
根據螢幕的寬高計算出螢幕高度的rpx值,減去其他元件的高度得出scroll高度