小程序：如何讓scroll-view包含內容完整滾動

 

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;這樣才能正常顯示