<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)
无数据时弹窗提示
注:里面内容根据自身逻辑进行更改