微信小程序scroll-view組件自適應不同高度的手機

已知微信相比於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高度

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章