uniapp微信小程序之滚动页面加载数据

<scroll-view enable-flex scroll-y @scrolltolower="handleToLower" class="category_tab_content">
           <view class="cate_item"
            v-for="item in vertical"
            :key="item.id">
                <image mode="widthFix" :src="item.thumb"></image>
            </view>
</scroll-view>

scroll-view 为滑动页面标签

属性：

scroll-y 竖屏滚动

scrolltolower 滚动到底部事件

handleToLower 自定义方法名

enable-flex 滚动不生效 或 生效后页面错乱提示需加标签

注：这里是图片滚动加载  ，如果是整体滚动  scroll-view写在相应的位置标签

handleToLower(){
            // console.log("出发滚动条");
            /* 
                1 修改参数 skip += limit;
                2 重新发送请求 getList()
                3 请求回来成功 hots 数据的叠加
            */
            if(this.hasMore){
                this.params.skip += this.params.limit;
                this.getList(); 
            } else {
                //弹窗提示用户
                uni.showToast({
                    title:"暂无数据",
                    icon:"none"
                })
            }
        
        }

上面为js代码。

getList为加载页面数据代码封装

hasMore为是否有下一页数据，当没有时，会在getList封装方法中把hasMore值改为false（data公共属性设置hasMore为true）

无数据时弹窗提示

注：里面内容根据自身逻辑进行更改