Use u-loadmore in uniapp, loadText content does not change with status
U-loadmore is used in uniapp, and the usage is relatively complicated. When loadText content does not change and refresh with status, that is, when status="loading", the displayed content is loadmore or nomore text.
Solution
Add key parameters
<u-loadmore :status="loadStatus" :load-text="loadText" :key="3"/>
LoadMore component using uni-ui
Pull-up loading
In the code, I use the LoadMore component used by list to implement the pull-down loading and post an official website component address.LoadMore
The principle of drop-down loading is roughly:
- Set how many pieces of data are displayed on each page and load the first page.
- After loading, determine the current status. If the length of the data list = all data lengths, set the status to noMore, otherwise it is more.
- Starting from the second page, every time a page is loaded, the next page is spliced into the data list. Repeat (2) until all data is loaded.
- When the data is loaded, the page number pageNum is no longer ++.
Pull down to refresh
Using onPullDownRefresh
- Define the onPullDownRefresh processing function (same as lifecycle functions such as onLoad) in js, and listen to the user pull-down refresh event on the page.
- You need to find the pages node of the current page in , and enable enablePullDownRefresh in the style option.
- After processing data refresh, you can stop the drop-down refresh of the current page.
//
{
"path": "pages/beiliao/beiliao",
"style": {
"navigationBarTitleText": "Preparation list",
"navigationStyle": "custom",
"enablePullDownRefresh": true,
"app-plus": {
"titleNView": false
}
}
},Specific code:
<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">
//The list content is omitted ~ <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/';
import uniPagination from '@/components/uni-pagination/'
import uniListItem from "@/components/uni-list-item/"
import uniList from "@/components/uni-list/"
import uniSection from "@/components/uni-section/"
import uniLoadMore from "@/components/uni-load-more/"
export default {
components: {
uniPagination,
uniListItem,
uniList,
uniSection,
uniLoadMore
},
data() {
return {
total: 0,
pageNum: 1,
pageSize: 10,
tableList: [],
status: 'more',
contentText: {
contentdown: 'See more',
contentrefresh: 'loading',
contentnomore: 'No more'
}
}
},
onLoad() {
();
},
//Pull-up load onReachBottom(){
if ( == 'noMore'){
return;
}
++;
()
();
},
//Drop down to refresh onPullDownRefresh(){
();
= [];
()
},
methods: {
queryByInput:function(){
= 1;
();
},
//Condition query getTableList: function() {
var that = this;
var params = {
current: ,
size:
}this.$('/workshop/productionmaterialorder/page', params, {
}).then(function(response) {
//This will only return when the interface is successful. =
//When the first time I loaded, if there was only one page of data (I wrote here just like the king of if statements. Everyone understands it. I blame me for being too naughty!!) if( == 0) {
= 'more'
= ()
if( == ) {
= 'noMore'
return false;
}
} else {
if( == ) {
= 'noMore'
return false;
} else {
= 'more'
= ()
}
}
}).catch(function(error) {
//This will only return when the interface is in a failed state, and there is no need to deal with error prompts (error);
});
},
//Click to see more trigger events clickLoadMore(e) {
// ('Load more') }
}
}
</script>Problems encountered
1. Looping splicing, and the first page starts splicing after the last page is over, mainly because there is no restriction of pageNum, and when the state becomes noMore, the page number will no longer be increased.
Solution:
//Pull-up loadonReachBottom(){
//Solve the above problems if ( == 'noMore'){
return;
}
++;
()
();
},2. Add new data. If you want to add a new list of data, the operation I performed here is to jump from page A to enter new information, and after adding it, return to page A. At this time, A needs to reload the page. (The loading page is called in onShow) If you jump from A, the page status may be on the third page and you cannot retain this status.
The solution I think of at present: do not refresh A, return the id of the new data when adding it, and add the new information to the original list.
3. Modify the data, A jumps to B modify, and return to page A after the modification is successful. The existence is the same as when it is added. Maybe you select a piece of data on the third page to modify it. If you reload page A after the modification is successful, it will be very troublesome. You have to turn down to view the data you just modified. Considering this problem, I chose not to refresh page A after successful.
Solution: When modifying, pass the index of the corresponding data to page B. After B has modified the data, return the index to A. In this way, the location where the modified data is located can be recorded. (I have written how to pass the AB page before, and I will not repeat the records)
//If the returned data has index, replace the data before modification at that location. If there is no new operation to refreshif() {
[].xx=
} else {
= [];
();
}Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.