客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
1.关于scroll-viewscroll-view是小程序用来控制可滚动视图区域的组件。通过设置scroll-x ="true" 或 scroll-y="true" 来分别控制横向滚动或纵向滚动；这里需要注意的一点: 使用竖向滚动时，需要给
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;这样才能正常显示
|
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
请发表评论