uniapp中使用u-loadmore,loadText内容不随status改变刷新方式

 更新时间:2024年05月24日 09:25:24   作者:D_lunar  
这篇文章主要介绍了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组合式API获取子组件属性和方法的代码实例

    vue3组合式API获取子组件属性和方法的代码实例

    这篇文章主要为大家详细介绍了vue3组合式API获取子组件属性和方法的代码实例,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • Vuejs开发环境搭建及热更新【推荐】

    Vuejs开发环境搭建及热更新【推荐】

    Vue.js是目前很火的一个前端框架,采用MVVM模式设计,它是以数据驱动和组件化的思想构建的。本文重点给大家介绍Vuejs开发环境搭建及热更新的相关知识,需要的朋友参考下吧
    2018-09-09
  • vue3+ts封装axios实例以及解决跨域问题

    vue3+ts封装axios实例以及解决跨域问题

    在前端开发中,使用axios进行数据请求是常见的做法,封装axios可以统一请求头处理、方便接口管理、配置多拦截器等,提高代码的可维护性和重用性,本文详细记录了axios的封装过程,包括安装、配置跨域处理、接口管理文件的创建等
    2024-09-09
  • Vue预渲染:prerender-spa-plugin生成静态HTML与vue-meta-info更新meta

    Vue预渲染:prerender-spa-plugin生成静态HTML与vue-meta-info更新meta

    Vue.js中,prerender-spa-plugin和vue-meta-info插件的结合使用,提供了解决SEO问题的方案,prerender-spa-plugin通过预渲染技术生成静态HTML,而vue-meta-info则能动态管理页面元数据,本文将探讨如何使用这两个工具优化Vue.js项目的SEO表现,包括安装、配置及注意事项
    2024-10-10
  • Vue Element前端应用开发之开发环境的准备工作

    Vue Element前端应用开发之开发环境的准备工作

    这篇文章主要介绍了Vue Element前端应用开发之开发环境的准备工作,对Vue感兴趣的同学,可以来学习一下
    2021-05-05
  • Vuex中的Mutation使用详解

    Vuex中的Mutation使用详解

    这篇文章主要介绍了Vuex中的Mutation使用详解,当我们想修改状态值,想传入的值进而进行修改时,你可以向 store.commit 传入额外的参数,即 mutation 的 载荷,需要的朋友可以参考下
    2023-11-11
  • Vue.JS项目中5个经典Vuex插件

    Vue.JS项目中5个经典Vuex插件

    在本文中,将向你展示5个特性,你可以通过 Vuex 插件轻松地添加到下一个项目中。一起来学习下。
    2017-11-11
  • vue-router:嵌套路由的使用方法

    vue-router:嵌套路由的使用方法

    本篇文章主要介绍了vue-router:嵌套路由的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • Vue中使用装饰器的方法详解

    Vue中使用装饰器的方法详解

    装饰器是一种与类相关的语法糖,用来包装或者修改类或者类的方法的行为,其实装饰器就是设计模式中装饰者模式的一种实现方式,下面这篇文章主要给大家介绍了关于Vue中使用装饰器的相关资料,需要的朋友可以参考下
    2022-01-01
  • 封装一个Vue文件上传组件案例详情

    封装一个Vue文件上传组件案例详情

    这篇文章主要介绍了封装一个Vue文件上传组件案例详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08

最新评论