uniapp上拉加载

最近在写uniapp的项目，看好写到上拉加载这一块，拿出来详细说一下写法，和注意事项吧。
首先在data里面要有这些值

             last_page: '', //总页数page: 2,//上拉加载的起始页loadingnum: 12, //加载条数send:false,//上拉加载的状态  避免数据没更新时重复请求productlist:[],//数据盒子nodata: false, //没有更多数据loadings: false, //加载框

然后和onShow或者onLoad同级的地方写onReachBottom()

//上拉加载onReachBottom() {//判断总页数是否大于1 if (this.last_page > 1) {if(this.send == false){        if (this.page <= this.last_page) {//开始加载this.send = true;this.loadings = true;//这个是上拉的特效this.$api.get(global.apiUrls.productlist, {// status:this.current,page: this.page,pagesize: this.loadingnum,type: 2,}).then(res => {const {productlist} = this;if(res.data.code == 1){//延迟加载数据 减少并发量setTimeout(() => {//结束加载this.loadings = false;this.productlist = [...productlist, ...res.data.data.data]this.send = false;}, 700)this.page++;}else{this.$message.info('诶呀,加载失败了稍后再试试吧');this.send = false;}}).catch(err => {// console.log(res)this.send = false;})} else {this.nodata = true;   //当加载完没数据后 显示无更多数据                          }}}},

在methods中写第一次获取数据的方法

//获取数据getproductlist() {this.$api.post(global.apiUrls.productlist, {page: 1,pagesize: this.loadingnum,type: 2, //获取数据类型  }).then(res => {console.log(res.data, 1111111111)if(res.data.code == 1){this.productlist = res.data.data.data;this.last_page = res.data.data.last_page;if (res.data.data.last_page == 1) {this.nodata = true;}} else{this.$message.info('唉,获取数据失败了');this.nodata = true;}                     }).catch(err => {console.log(res)})},

onLoad里面调用 getproductlist , 不要放在onShow里面，因为一般都上拉加载处都是列表，点击是可以进入详情页的，如果放到onShow里面会造成每次从详情页返回都会重新获取数据，造成页面刷新，以及内容回到最上面。

this.getproductlist();//获取数据

如果有一个界面有其他分类的，在切换类型时，切记要重置 page（上拉起始页），也可以将总页数和上拉起始页一起重置，可以在切换方法里加入

this.page = 2;//将上拉起始页重置到 2   **这部是必须要有的**
this.last_page = '',//将总页数置空

如果页面有下拉刷新,同样切记一定要将 page重置到2 代码同上;

加载特效使用了uview组件
底部loading 和无更多数据
html

     <view class="loading" v-show="loadings"><view class="loading-san"><u-loading size="40" color="#FFBA4B" ></u-loading><view class="logintext">一大波玩偶正在赶来~~</view></view></view><view class="nodata" v-show="nodata">没有更多数据</view>

css

 //加载.loading {width: 100%;height: 100upx;display: flex;justify-content: space-around;align-items: center;background-color: #F6F7F9;.loading-san {display: flex;justify-content: space-around;align-items: center;.logintext {margin-left: 16upx;font-size: 28upx;font-family: PingFang;color: #999999;}}}//没有更多数据.nodata {width: 100%;height: 100upx;background-color: #F6F7F9;text-align: center;line-height: 100upx;color: #999999;font-size: 24upx;font-family: PingFang SC;font-weight: 400;}

uniapp上拉加载相关推荐

uni-app 上拉加载函数 onReachBottom 不触发
记一次问题解决记录. 问题:uni-app 上拉加载函数不触发. 首先我已经在 pages.json 文件中配置了 enablePullDownRefresh 为 true,且配置正确. {" ...
uniapp上拉加载的避坑指南
uniapp上拉加载 uniapp的上拉加载和下拉刷新一样都有两个方法, 一个是整体的上拉(生命周期函数onReachBottom), 一个是局部的上拉(基于scrpll-view组件); 一.整个页 ...
uniapp 上拉加载更多完整实现源码
直接上代码 <template><view class="searchList"><Search></ ...
uni-app 数据上拉加载更多功能
实现上拉加载更多打开项目根目录中的 pages.json 配置文件,为 subPackages 分包中的商品 goods_list 页面配置上拉触底的距离: "subPackages&qu ...
关于uniapp的下拉刷新，上拉加载的使用
uniapp 是基于vue生态的,兼容多端的解决方案的一个框架. 其编码风格和原生的信微信小程序有极为相似. uniapp可以轻松实现下拉刷新和上拉加载的效果,在实际应用中,对于我们对列表的分页处理, ...
uni-app下拉刷新、上拉加载更多实现
下拉刷新下拉刷新文档在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件. 需要在 pages.json 里,找到的当前页 ...
uniapp 实现上拉加载
1.page.json中,将 enablePullDownRefresh 设置为 true {"path": "pages/home/communityNews" ...
uniapp列表的上拉加载
uniapp列表的上拉加载 1.首先在页面加上loading和'数据已加载完毕'文字提示 <view class="loading" v-if="isFinsh&q ...
uniapp小程序实现上拉加载更多
废话不多说直接上代码,对了这里的上拉组件使用的是uniapp自带的组件uni-load-more <template><view><view v-for="(i ...
uniapp微信小程序uni-load-more上拉加载更多数据
1.引入uni-app中uni-load-more.vue到自己的项目 import uniLoadMore from '@/components/uni-load-more/uni-load-mor ...

uniapp上拉加载

uniapp上拉加载相关推荐

最新文章

热门文章