小程序：如何让scroll-view包含内容完整滚动

Posted 2020-11-07 kevinInsight

 

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;这样才能正常显示