微信小程序長圖完整滾動顯示

 

 如圖，當插入的圖片的長度超屏幕的高度時，會導致圖片高度被壓縮。

解決的方法是，給圖片外面加一個scroll-view組件實現滾動顯示，添加屬性mode="widthFix"使得圖片寬度完整顯示，詳見代碼。

.wxml

<scroll-view scroll-y="{{true}}" style="width:100%;height:{{sysheight}}px;">
    <view class="img-size">
        <image src="../../images/liucheng.jpg" mode="widthFix" class="liucheng-img"></image>
    </view>
</scroll-view>

.js

onLoad: function (options) {
    wx.getSystemInfo({//獲取設備屏幕真實高度
      success: (result) => {
        this.setData({
          sysheight:result.windowHeight
        })
      },
    })
  },

.wxss

page{
width: 100%;
height: 100%;
}
.img-size {
  width: 100%;
  margin: auto;

}

.liucheng-img {
  width: 100%;
  height: 100%;
 
}

希望以上解決方案對你有用！