微信小程序 scroll-view 组件的几个要点

╰+哭是因爲堅強的太久メ 2022-03-15 10:38 221阅读 0赞

### 横向滚动 ###

微信小程序 scroll-view 组件横向滚动需要设置 scroll-x 属性为true。 还需要设置 **white-space: nowrap** 强制不换行，以及设置滚动项 view 为 **display: inline-block**。例如：

<scroll-view scroll-x style="white-space: nowrap;">
        <view style="display: inline-block;"></view>
        <view style="display: inline-block;"></view>
        ...
    </scroll-view>

如果把 scroll-view 组件放到 position: fixed 里，即固定在页面某个位置（例如顶部或底部），这时需要设置 **width: 100%**，否则组件不滚动。例如：

### 上拉加载 ###

<scroll-view scroll-y="true" bindscrolltolower="pullUpLoad" style="height: 58%;" class="content-wrap">

实现上拉加载，只需要绑定bindscrolltolower 事件处理，当滚动到底部/左边的时候，触发这个处理函数，逻辑上就是去请求下一页的数据，并且视图上显示正在加载的样式，当数据请求成功，将其拼合到之前的数据中，并隐藏正在加载的样式

//上拉加载
    pullUpLoad: function(){
        var that = this;
        console.log("====下拉====")
        if (!that.data.hidden) {
            that.data.params.pageNo += 1;
            that.setData({
                params: that.data.params,
            })
            if(that.data.params.pageNo <= that.data.totalPages){
                that.setData({
                    hidden: true,
                })
                that.getShareList();
            }else{
                that.setData({
                    hidden: false,
                })
            }
        }
    }

### 满屏滚动 ###

文档中说到：使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

那么我们想让小程序满屏滚动该如何设置高度呢，直接设置height:100%?好像不是很好用，原因是因为这个高度没有参照物，以前我们是设置body的高度，类似，我们这里发现小程序页面渲染出来的容器是Page，那我们就先设置Page的高度100%，再设置scroll-view高度100%，问题得到解决。

参考：  
[https://blog.csdn.net/u013778905/article/details/60332971][https_blog.csdn.net_u013778905_article_details_60332971]

[https_blog.csdn.net_u013778905_article_details_60332971]: https://blog.csdn.net/u013778905/article/details/60332971