【uniapp】页面下拉刷新

目录

一、全局

二、局部

1、一个页面一个下拉刷新

2、一个页面多个下拉刷新(切换时滚动条回到顶部)

3、一个页面多个下拉刷新(切换时恢复滚动条位置)


一、全局

修改pages.json的"enablePullDownRefresh": true,

{
    "pages": [ 
        {
            "path": "pages/tabBar/dashboard/index",
            "style": {
                "navigationBarTitleText": "项目管理",
                "enablePullDownRefresh": true,
                "navigationBarTextStyle": "white",
                "navigationBarBackgroundColor": "#374449"
            }
        },
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "管理平台",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
}

页面中(onPullDownRefresh 处理函数和onLoad等生命周期函数同级 )

export default {
    data() {
            return {
                productList: [], //列表
                query: {
                    keyword: '', //搜索框
                    pagesize: 10,
                    page: 1,
                },
                total: 0, //总条数
                showTotal: true, //是否显示“下拉加载更多~”
            }
        },
        // 下拉刷新
        onPullDownRefresh() {
            var allTotal = this.query.page * this.query.pagesize
            //this.page为加载次数,this.pageSize为每一次加载的数据条数
            if (allTotal < this.total) {
                //this.total为请求数据的总条数。只要现有条数小于总条数就执行一下代码
                this.showTotal = true;
                this.query.page++;
                //加载次数递加
                this.getlist() //请求更多数据列表
            } else {
                this.showTotal = false;
            }
            uni.stopPullDownRefresh();//停止刷新
        },
}

二、局部

我使用的是插件https://ext.dcloud.net.cn/plugin?id=343

插件文档https://www.mescroll.com/uni.html 

这个插件的还有相对应的案例我已经下载下来了,到时候直接放到编辑器打开即可 链接:https://pan.baidu.com/s/1q6IB-mCdCQqcvKaZmzJtcg 提取码:e66j

【uniapp】页面下拉刷新_第1张图片

我的需求是顶部内容固定不动,列表下拉刷新(没有页码,数据一次性展示) 

1、一个页面一个下拉刷新

页面使用




2、一个页面多个下拉刷新(切换时滚动条回到顶部)

【uniapp】页面下拉刷新_第2张图片

多页tabs切换,实现下拉刷新(没有页码,数据一次性展示) ,每个tab页面内容都不相同

插件上说不能使用v-if,是因为使用了v-if就不能实现切换tabs恢复滚动条位置(v-if是创建和销毁,v-show是隐藏和显示)。

但是我使用官方示例的代码重新加载列表数据或其他的方法都不行

// 详情返回列表,重新加载列表数据
	onShow() {
		this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
		this.canReset && this.mescroll.scrollTo(0,0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
		this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
		
		// 注意: 子组件没有 onShow 的生命周期, 所以
		// 对于 mescroll-more.vue 和 mescroll-swiper.vue 的返回刷新, 需更新 1.3.3 版本, 且参考对应示例的onShow写法
	}

若是换成mescroll-body,并且使用v-show会出现切换tabs滚动条位置一致,也就是上一页滚动条在哪,下一页的滚动条就在哪。找了好久也不知道问题出在哪里,最后我只能写成组件使用mescroll-uni+v-if的方法。

但是你们使用还是要先根据官网来做,如果出现我这样的问题再安装我的方法做 

第一步:创建组件放置tabs所对应的页面(这里我就只写一个子组件的格式)

pages/word/components/all.vue

注意:子组件使用onShow、onLoad无效,需要写在created中才行 



pages/word/components/downitem.vue和上一个组件一致,只不过数据组件不一致,多了一个获取列表的方法给父组件使用



第三步:在页面中使用pages/word/components/index.vue





3、一个页面多个下拉刷新(切换时恢复滚动条位置)

如果tabs对应内容分别封装成各自组件,子组件封装的时候使用mescroll-uni,并且使用v-show会出现当列表数据多页时切换tabs,恢复滚动条位置不准确并且会触发上拉这样的问题。但是如果我把他放在一个组件里就不会产生这样的问题

 第一步:组件pages/word/components/all.vue

Tree和DownTree组件使用的是uni-list的自定义插槽,不知道为啥我使用uni-list-item就会触发一次上拉,之后就不会了,但是不使用就不会触发



第二步:页面使用pages/word/components/index.vue




到这里就结束啦,这篇文章看完如果您觉得有所收获,认为还行的话,就点个赞收藏一下

 

 

你可能感兴趣的:(uni-app,uni-app,java,前端,1024程序员节)