小程序scroll-view 上拉加载 + 页面 上拉加载

scroll-view

可滚动视图区域。用于区域滚动。

相关属性使用说明：

1.scroll-x：允许横向滚动   默认： false

2.scroll-y：允许纵向滚动   默认： false

3.upper-threshold:  距顶部/左边多远时（单位px），触发 scrolltoupper 事件    默认：50

4.lower-threshold:  距底部/右边多远时（单位px），触发 scrolltolower  事件    默认：50

5.@scrolltoupper:  滚动到顶部/左边，会触发 scrolltoupper 事件

6.@scrolltolower:  滚动到底部/右边，会触发 scrolltolower 事件

 

我做的是竖向滚动，根据官网提示，要给scroll-view一个固定高度。

<scroll-view scroll-y="true" class="zixun-news" :style="{height:scrollviewHeight}" lower-threshold="30" @scrolltolower="getNewsData()">
                    <view v-for="(item,index) in zixunList" :key="index" class="zixun-item" @click="checkNews(item, index)">
                    </view>
</scroll-view>

因为该页面其他高度是固定的，为了适配不同机型的手机，需要动态更改scroll-view的高度，在上面代码中 :style="{height:scrollviewHeight}" 动态添加style的样式，在data中声明scrollviewHeight

data() {
    return {
        scrollviewHeight: '',
   　　  statusBarHeight: ''
    }
}    

然后在onLoad()页面加载时设置小程序的高度

onLoad() {

            uni.getSystemInfo({
                success: (res) => {
                    // 获取手机状态栏高度
                    this.statusBarHeight = res.statusBarHeight;
                    this.scrollviewHeight = `calc(100vh - 580rpx - ${this.statusBarHeight}rpx)`;
                }
            });

        },

最后，通过lower-threshold="30"距离底部30px时，触发@scrolltolower="getNewsData()"，添加动态获取数据的事件

// 获取新闻
            getNewsData(){
                let that = this
                let param = {
                    category: '新闻报道',
                    current: this.page,
                    size: this.pageSize
                }
                selectNewsPage(param).then( res => {
                    // console.log(res)
                    if(res.statusCode == 200){
                        if(res.data.code == 200){
                            let lists = res.data.data
                            if(lists.length !== 0 && lists !== []){
                                if(this.page == 1){
                                    this.zixunList = lists
                                    this.page += 1
                                }else{
                                    that.zixunList = that.zixunList.concat(lists);
                                    this.page += 1
                                }
                            }else{
                                uni.showToast({
                                    icon: 'none',
                                    title: '没有更多'
                                })
                            }
                        }
                    }
                })
            },

上拉加载本质是分页获取数据，然后将获取的数据concat到一个数组中，中间要做好判断。

以上是scroll-view上拉加载，下面说一下页面的上拉加载

首先在pages.json的页面配置中设置触底距离"onReachBottomDistance": 100，单位是px，默认触底距离为50px。

{
            "path": "pages/index/index",
            "style": {
                "navigationBarTextStyle": "black",
                "navigationBarTitleText": "首页",
                "onReachBottomDistance": 100
            }
        },

监听上拉触底事件：onReachBottom() 函数，可以监听用户在当前页面的上拉触底事件，从而实现上拉加载更多列表数据的效果。

// 上拉加载更多,onReachBottom上拉触底函数（与data函数同级）
        onReachBottom(){
           this.getNewsData();
        },