seo网站分析工具,免费开源网站模板,个人网站怎么命名,网站建设管理情况自查报告上拉加载
在需要实现该功能的页面写入 onReachBottom#xff08;#xff09;方法函数#xff0c;该方法与 onLoad() 方法同级#xff0c;需在在data中声明 pageNo和pageSize以及总条数#xff0c;具体代码如下#xff1a;
html 部分
-- html部分 引入uview 使用u…上拉加载
在需要实现该功能的页面写入 onReachBottom方法函数该方法与 onLoad() 方法同级需在在data中声明 pageNo和pageSize以及总条数具体代码如下
html 部分
-- html部分 引入uview 使用uview加载效果 --div v-ifloading styledisplay: flex;justify-content: center;margin-top: 50rpx;u-loading-icon/u-loading-icon/div
javascript 部分
data() {return { loading: true,//页码pageNo: 1,//页容量pageSize: 10,//总条数total: 0,List:[]}},onLoad() { },// 上拉加载数据onReachBottom() {//判断 如果页码*页容量大于等于总条数提示该页数据加载完毕if (this.pageNo * this.pageSize this.total){uni.$u.toast(数据加载完毕)return}//并且让页码1,调用获取数据的方法获取第二页数据this.pageNo//此处调用自己获取数据列表的方法this.Getlist()},methods: {// 获取数据列表Getlist() {//设置加载效果this.loading true//调起接口 将页码入参Api({params: {pageNo: this.pageNo,pageSize: this.pageSize}}).then(res {//如果获取数据成功 将数据赋值给事先声明的数组if (res.success) {this.List res.result.records//判断 如果获取的数据的页码不是第一页就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据if (res.result.pages ! 1) {this.List this.List.concat(res.result.records)} else {this.List res.result.records}//将获取的总条数赋值this.total res.result.total}this.loading false})},}
遇到的问题
屏幕上滑onReachBottom不触发
解决
如果你在使用 onReachBottom 的时候没有触发就看看那个页面有没有出现滚动条没有就不会触发 因为 view 没有高度百分百也不行然后就调用不到 onReachBottom 这个钩子
page {height: initial;overflow-y: initial;min-height: 100vh;}
其实配不配置 onReachBottomDistance 都没关系的个人觉得
initial 关键字用于设置 CSS 属性为它的默认值
initial 关键字可用于任何 HTML 元素上的任何 CSS 属性 官网 initial 参考原文
下拉刷新
打开项目根目录中的 pages.json 配置文件在需要开始下拉刷新功能的页面路径下添加 或者在 globalStyle 中全局添加 enablePullDownRefresh 为true开始下拉刷新。代码如下 某个页面开启
{path: pages/views/index,style: {navigationBarTextStyle: white,navigationBarBackgroundColor: #6495ed,navigationBarTitleText: 首页,enablePullDownRefresh: true}},
全局开启
globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: uni-app,navigationBarBackgroundColor: #F8F8F8,backgroundColor: #F8F8F8,enablePullDownRefresh: true,}},
同样在与 onLoad() 方法同级处添加以下代码
// 下拉刷新onPullDownRefresh() {console.log(刷新)//下拉之后 重新调用获取数据的方法this.Getlist()//获取之后 一定要 调用uni.startPullDownRefresh 停止刷新否则将会一直处于刷新状态 uni.startPullDownRefresh()},
参考原文
