uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新方式

更新時(shí)間：2024年05月24日 09:25:24 作者：D_lunar

這篇文章主要介紹了uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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();
}