1.关于scroll-view
scroll-view是小程序用来控制可滚动视图区域的组件。
通过设置scroll-x ="true" 或 scroll-y="true" 来分别控制横向滚动或纵向滚动;这里需要注意的一点:
使用竖向滚动时,需要给<scroll-view/>
一个固定高度,通过 WXSS 设置 height
2.使用scroll-view来实现一个介绍页长图的完整滚动显示
本以为是一个简单的需求,没想到也会采坑;
第一版实现思路及代码如下:
通过wx.getSystemInfoSync()获取设备高度,然后通过内联样式去给scroll-view组件height赋值
wxml
<scroll-view class="help-info" scroll-y="true" style="height:{{scrollHeight}}px">
<image lazy-load="true" src="../../images/userGuide.jpg" mode="widthFix"></image>
</scroll-view>
wxss
.help-info {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.help-info image {
display: block;
width: 100%;
height: 100%;
}
js
Page({
data: {
scrollHeight: ''
},
onLoad: function() {
let self = this;
wx.getSystemInfo({
success: function(res) {
self.setData({
scrollHeight: res.windowHeight
})
}
});
}
})
测试结果:
图片在ios上不能显示完整,偶尔也会先不能滚动的情况
认真查找很久原因,发现是因为没有给scroll-view设置 overflow: auto;
wxss更改如下:
.help-info {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: auto;
}
.help-info image {
display: block;
width: 100%;
height: 100%;
}
测试结果:
正常显示
总结:在使用scroll-view实现竖直滚动的时候,要设置下overflow: auto;这样才能正常显示