【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

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

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

页面使用

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

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