标签：实现 UI guid 原因 没有 java 滚动视图 splay system
通过设置scroll-x ="true" 或 scroll-y="true" 来分别控制横向滚动或纵向滚动；这里需要注意的一点:
使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height
本以为是一个简单的需求，没想到也会采坑；
第一版实现思路及代码如下：
通过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;这样才能正常显示
标签：实现 UI guid 原因 没有 java 滚动视图 splay system
原文地址：https://www.cnblogs.com/kevinCoder/p/9074271.html
