⼩程序长图完整滚动显⽰
如图,当插⼊的图⽚的长度超屏幕的⾼度时,会导致图⽚⾼度被压缩。
解决的⽅法是,给图⽚外⾯加⼀个scroll-view组件实现滚动显⽰,添加属性mode="widthFix"使得图⽚宽度完整显⽰,详见代码。.wxml
1<scroll-view scroll-y="{{true}}" >
2<view class="img-size">
3<image src="../../images/liucheng.jpg" mode="widthFix" class="liucheng-img"></image>
4</view>
5</scroll-view>
.js
onLoad: function (options) {
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%;
}
希望以上解决⽅案对你有⽤!