uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新方式
uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新
uniapp中使用u-loadmore，使用情況比較復(fù)雜，出現(xiàn)loadText內(nèi)容不隨status改變刷新的情況，即當(dāng)status="loading"時(shí)，顯示的內(nèi)容是loadmore或nomore的文字。
解決辦法
添加key參數(shù)
<u-loadmore :status="loadStatus" :load-text="loadText" :key="3"/>
uni-app上拉加載 使用uni-ui的LoadMore組件
上拉加載
我在代碼里是配合list使用的LoadMore 組件實(shí)現(xiàn)下拉加載，貼一個(gè)官網(wǎng)組件地址 LoadMore
下拉加載的原理大概是：
- 設(shè)置好每頁(yè)展示多少條數(shù)據(jù)，加載第一頁(yè)。
- 加載完后判斷當(dāng)前狀態(tài)，如果數(shù)據(jù)列表的長(zhǎng)度=全部數(shù)據(jù)長(zhǎng)度，則將狀態(tài)設(shè)置為noMore，否則為more。
- 從第二頁(yè)開(kāi)始，每加載一頁(yè)就在數(shù)據(jù)列表中拼接下一頁(yè)內(nèi)容。重復(fù)進(jìn)行（2）直到加載完全部數(shù)據(jù)。
- 當(dāng)數(shù)據(jù)加載完畢后頁(yè)碼pageNum不再++。
下拉刷新
使用onPullDownRefresh
- 在 js 中定義 onPullDownRefresh 處理函數(shù)（和onLoad等生命周期函數(shù)同級(jí)），監(jiān)聽(tīng)該頁(yè)面用戶下拉刷新事件。
- 需要在 pages.json 里，找到的當(dāng)前頁(yè)面的pages節(jié)點(diǎn)，并在 style 選項(xiàng)中開(kāi)啟 enablePullDownRefresh。
- 當(dāng)處理完數(shù)據(jù)刷新后，uni.stopPullDownRefresh可以停止當(dāng)前頁(yè)面的下拉刷新。
//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內(nèi)容省略啦~
<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: '沒(méi)有更多'
}
}
},
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) {
//這里只會(huì)在接口是成功狀態(tài)返回
that.total = response.total
//第一次加載時(shí)，若只有一頁(yè)數(shù)據(jù)（這里寫(xiě)的簡(jiǎn)直if語(yǔ)句之王，大家懂的都懂，怪我太菜了！?。?
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) {
//這里只會(huì)在接口是失敗狀態(tài)返回，不需要去處理錯(cuò)誤提示
console.log(error);
});
},
//點(diǎn)擊查看更多觸發(fā)事件
clickLoadMore(e) {
// console.log('加載更多')
}
}
}
</script>遇到的問(wèn)題
1.循環(huán)拼接，最后一頁(yè)結(jié)束后又開(kāi)始拼接第一頁(yè)，主要是由于沒(méi)有限制pageNum，當(dāng)狀態(tài)變成noMore不再進(jìn)行頁(yè)碼的增加即可。
解決辦法：
//上拉加載
onReachBottom(){
//解決上述問(wèn)題
if (this.status == 'noMore'){
return;
}
this.pageNum ++;
console.log(this.pageNum)
this.getTableList();
},2.新增數(shù)據(jù) ，如果要新增一條列表數(shù)據(jù)，我這里進(jìn)行的操作是從A跳轉(zhuǎn)頁(yè)面B輸入新息，新增后回到A頁(yè)面，此時(shí)需要A重新加載頁(yè)面。（加載頁(yè)面在onShow中調(diào)用）而如果在從A跳轉(zhuǎn)B時(shí)，頁(yè)面狀態(tài)可能是處于第三頁(yè)，無(wú)法保留住此狀態(tài)。
目前想到的解決方法：不刷新A，新增時(shí)返回新增數(shù)據(jù)的id,將新增信息添加至原本的列表下即可。
3.修改數(shù)據(jù) ，A跳B(niǎo)修改，修改成功后返回A頁(yè)面，存在情況和新增時(shí)一樣，可能你在第三頁(yè)選中某條數(shù)據(jù)進(jìn)行修改，如果修改成功后重新加載A頁(yè)面就會(huì)很麻煩，又要翻下去查看剛才修改的數(shù)據(jù)，考慮到這個(gè)問(wèn)題所以我選擇成功后不刷新A頁(yè)面。
解決方法：修改時(shí)將對(duì)應(yīng)數(shù)據(jù)的index傳遞給B頁(yè)面，在B修改完數(shù)據(jù)后再把index返回給A，這樣就可以把修改數(shù)據(jù)所在的位置記錄下來(lái)。（AB頁(yè)面怎么傳參我之前寫(xiě)過(guò)，不再重復(fù)記錄）
//如果返回的數(shù)據(jù)有index，則替換掉該位置修改前數(shù)據(jù)，沒(méi)有則是新增操作進(jìn)行刷新
if(this.index) {
this.tableList[this.index].xx= this.xx
} else {
this.tableList = [];
this.queryByInput();
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目中引入外部文件的方法（css、js、less）
本篇文章主要介紹了Vue項(xiàng)目中引入外部文件的方法（css、js、less），非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-07-07
vue項(xiàng)目完成后如何實(shí)現(xiàn)項(xiàng)目?jī)?yōu)化的示例
本文主要介紹了vue項(xiàng)目完成后如何實(shí)現(xiàn)項(xiàng)目?jī)?yōu)化的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
mpvue中配置vuex并持久化到本地Storage圖文教程解析
這篇文章主要介紹了mpvue中配置vuex并持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同，只是mpvue有一個(gè)坑，就是不能直接在new Vue的時(shí)候傳入store。本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue可滑動(dòng)的tab組件使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue3+ts項(xiàng)目中.env配置環(huán)境變量與情景配置方式
本文介紹了如何在Vite中配置環(huán)境變量和不同的運(yùn)行模式,環(huán)境變量文件以.env開(kāi)頭,僅VITE_前綴的變量會(huì)被暴露,開(kāi)發(fā)模式加載.env.development,生產(chǎn)模式加載.env.production,NODE_ENV用于區(qū)分開(kāi)發(fā)和生產(chǎn)環(huán)境2024-10-10
Vue使用vxe-table導(dǎo)出和自定義Excel樣式的詳細(xì)教程
vxe-table 不僅支持將表格數(shù)據(jù)導(dǎo)出為 .xlsx 文件,還提供了強(qiáng)大的自定義樣式能力,因此本文給大家介紹了Vue使用vxe-table導(dǎo)出和自定義Excel樣式的詳細(xì)教程,需要的朋友可以參考下2026-05-05
Vue中搭配Bootstrap實(shí)現(xiàn)Vue的列表增刪功能
日常開(kāi)發(fā)中，我們可以用?“拿來(lái)主義”?借助Bootstarp現(xiàn)成的一些樣式，快速生成我們想要的頁(yè)面布局，避免書(shū)寫(xiě)大量的HTML和CSS代碼，省下了許多不必要的時(shí)間，可以直接搭配vue使用2022-11-11
前端設(shè)置cookie之vue-cookies使用及說(shuō)明
這篇文章主要介紹了前端設(shè)置cookie之vue-cookies使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
在Vue3中可以使用`ref`來(lái)獲取DOM元素,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中使用Ref訪問(wèn)DOM元素的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
基于element日歷組件實(shí)現(xiàn)簽卡記錄
這篇文章主要為大家詳細(xì)介紹了基于element日歷組件實(shí)現(xiàn)簽卡記錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08