1. 程式人生 > >微信小程式scroll-view元件自適應不同高度的手機

微信小程式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高度