uni-app、小程序之swiper-item內容過多顯示不全的解決方案


原文

最近在項目遇到swiper高度不能自適應,導致swiper-item 里面的內容過多時只能顯示一部分,最終解決方案:
<swiper>
    <swiper-item>
      <scroll-view :scroll-y="true" :style="{height: clientHeight?clientHeight+'px':'auto'}"> 
        內容放在這
      </scroll-view>
    </swiper-item>
  </swiper>
swiper-item {
  overflow: scroll;
}

最后在后台動態獲得屏幕可視區域高度clientHeight即可

onLoad: function () {
    let that = this
    //uni-app是uni.getSystemInfo,微信小程序wx.getSystemInfo
    uni.getSystemInfo({
      success: function (res) {
        //uni-app
        that.clientHeight=res.windowHeight-177
        //微信小程序
        //that.setData({
        //  clientHeight: res.windowHeight-177
        //});
      }
    })
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM