微信小程序scrollview高度自適應

微信小程序中的scroll-view,如果縱向滾動的話,需要設置height,對於全局的scrollview,直接設置100vh就可以了,對於局部的,高度不能寫死,只能自己計算了
微信小程序爲了適配,引入了rpx,
在這裏插入圖片描述
所以提供了計算的依據
方法是:

 let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度
    let windowWidth = wx.getSystemInfoSync().windowWidth // 屏幕的寬度
    let ratio = 750 / windowWidth;

    this.setData({
      scroll_height: (windowHeight - 100) * ratio
    })

100是我其他控件的高度,單位是px;
wxml中

 <scroll-view scroll-y  style="width: 40%; background: #eaeaea;  height: {{scroll_height}}rpx">

網上還有一種方法,我試了一下,在某些界面有效
微信小程序scroll-view自動適應屏幕高度的使用方法

在有些界面無效,動態計算高度適用性更廣一些

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