uniapp中使用u-loadmore,loadText内容不随status改变刷新方式
uniapp中使用u-loadmore,loadText内容不随status改变刷新
uniapp中使用u-loadmore,使用情况比较复杂,出现loadText内容不随status改变刷新的情况,即当status="loading"时,显示的内容是loadmore或nomore的文字。
解决办法
添加key参数
<u-loadmore :status="loadStatus" :load-text="loadText" :key="3"/>
uni-app上拉加载 使用uni-ui的LoadMore组件
上拉加载
我在代码里是配合list使用的LoadMore 组件实现下拉加载,贴一个官网组件地址 LoadMore
下拉加载的原理大概是:
- 设置好每页展示多少条数据,加载第一页。
- 加载完后判断当前状态,如果数据列表的长度=全部数据长度,则将状态设置为noMore,否则为more。
- 从第二页开始,每加载一页就在数据列表中拼接下一页内容。重复进行(2)直到加载完全部数据。
- 当数据加载完毕后页码pageNum不再++。
下拉刷新
使用onPullDownRefresh
- 在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。
- 需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh。
- 当处理完数据刷新后,uni.stopPullDownRefresh可以停止当前页面的下拉刷新。
//pages.json { "path": "pages/beiliao/beiliao", "style": { "navigationBarTitleText": "备料单", "navigationStyle": "custom", "enablePullDownRefresh": true, "app-plus": { "titleNView": false } } },
具体代码:
<template> <view style="background-color: #F0F0F0;"> <view class="box" style="padding:10px 10px;margin:70px 10px -10px 10px"> <uni-list style="background-color: #F0F0F0;"> <view v-for="(item,index) in tableList" :key="index"> //list内容省略啦~ <uni-list-item showArrow :note="'xxx'" /> </view> <view class="example-body"> <uni-load-more :status="status" :content-text="contentText" @clickLoadMore="clickLoadMore"/> </view> </uni-list> </view> </view> </template>
<script> import util from '../../util/util.js'; import uniPagination from '@/components/uni-pagination/uni-pagination.vue' import uniListItem from "@/components/uni-list-item/uni-list-item.vue" import uniList from "@/components/uni-list/uni-list.vue" import uniSection from "@/components/uni-section/uni-section.vue" import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue" export default { components: { uniPagination, uniListItem, uniList, uniSection, uniLoadMore }, data() { return { total: 0, pageNum: 1, pageSize: 10, tableList: [], status: 'more', contentText: { contentdown: '查看更多', contentrefresh: '加载中', contentnomore: '没有更多' } } }, onLoad() { this.queryByInput(); }, //上拉加载 onReachBottom(){ if (this.status == 'noMore'){ return; } this.pageNum ++; console.log(this.pageNum) this.getTableList(); }, //下拉刷新 onPullDownRefresh(){ uni.stopPullDownRefresh(); this.tableList = []; this.queryByInput() }, methods: { queryByInput:function(){ this.pageNum = 1; this.getTableList(); }, //条件查询 getTableList: function() { var that = this; var params = { current: this.pageNum, size: this.pageSize }this.$http.get('/workshop/productionmaterialorder/page', params, { }).then(function(response) { //这里只会在接口是成功状态返回 that.total = response.total //第一次加载时,若只有一页数据(这里写的简直if语句之王,大家懂的都懂,怪我太菜了!!) if(that.tableList.length == 0) { that.status = 'more' that.tableList = that.tableList.concat(response.records) if(that.tableList.length == that.total) { that.status = 'noMore' return false; } } else { if(that.tableList.length == that.total) { that.status = 'noMore' return false; } else { that.status = 'more' that.tableList = that.tableList.concat(response.records) } } }).catch(function(error) { //这里只会在接口是失败状态返回,不需要去处理错误提示 console.log(error); }); }, //点击查看更多触发事件 clickLoadMore(e) { // console.log('加载更多') } } } </script>
遇到的问题
1.循环拼接,最后一页结束后又开始拼接第一页,主要是由于没有限制pageNum,当状态变成noMore不再进行页码的增加即可。
解决办法:
//上拉加载 onReachBottom(){ //解决上述问题 if (this.status == 'noMore'){ return; } this.pageNum ++; console.log(this.pageNum) this.getTableList(); },
2.新增数据 ,如果要新增一条列表数据,我这里进行的操作是从A跳转页面B输入新息,新增后回到A页面,此时需要A重新加载页面。(加载页面在onShow中调用)而如果在从A跳转B时,页面状态可能是处于第三页,无法保留住此状态。
目前想到的解决方法:不刷新A,新增时返回新增数据的id,将新增信息添加至原本的列表下即可。
3.修改数据 ,A跳B修改,修改成功后返回A页面,存在情况和新增时一样,可能你在第三页选中某条数据进行修改,如果修改成功后重新加载A页面就会很麻烦,又要翻下去查看刚才修改的数据,考虑到这个问题所以我选择成功后不刷新A页面。
解决方法:修改时将对应数据的index传递给B页面,在B修改完数据后再把index返回给A,这样就可以把修改数据所在的位置记录下来。(AB页面怎么传参我之前写过,不再重复记录)
//如果返回的数据有index,则替换掉该位置修改前数据,没有则是新增操作进行刷新 if(this.index) { this.tableList[this.index].xx= this.xx } else { this.tableList = []; this.queryByInput(); }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3.0报错Cannot find module‘worker_threads‘的解决办法
这篇文章介绍了vue3.0报错Cannot find module‘worker_threads‘的解决办法。对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2021-11-11关于Elementui中toggleRowSelection()方法实现分页切换时记录之前选中的状态
这篇文章主要介绍了关于Elementui中toggleRowSelection()方法实现分页切换时记录之前选中的状态,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03解决vue组件中使用v-for出现告警问题及v for指令介绍
这篇文章主要介绍了解决vue组件中使用v-for出现告警问题,在文中给大家介绍了v for指令,需要的朋友可以参考下2017-11-11
最新评论