我要评论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();
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论