uniapp 底部导航 点击刷新当前页

项目原来跳转页面后就刷新页面，交互效果不是很好，现在需要保存页面数据，当点击底部当前导航时，再刷新，类似抖音刷视频时候的操作。

基础导航栏配置

pages.json 简单的基础配置

"pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页" 
            }
        }
        ,{
            "path" : "pages/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "我的"
            }
            
        }
    ],
"tabBar": {
        "color": "#7A7E83", // tab 上的文字默认颜色
        "selectedColor": "#3cc51f", // tab 上的文字选中时的颜色
        "borderStyle": "black", // tabbar 上边框的颜色，可选值 black/white
        "backgroundColor": "#ffffff",  // tab 的背景色
        "list": [{ // 最少2个、最多5个 tab
            "pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
            "iconPath": "static/tabbar/home.png", // 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
            "selectedIconPath": "static/tabbar/home-active.png", // 选中时的图片路径
            "text": "首页" // tab 上按钮文字
        }, {
            "pagePath": "pages/my/my",
            "iconPath": "static/tabbar/my.png",
            "selectedIconPath": "static/tabbar/my-active.png",
            "text": "我的"
        }]
    }

监听点击

使用 onTabItemTap 事件

onTabItemTap(e){
	console.log(e)
}

函数的参数 例：点击发现页

 index： 导航的下标 （从0开始的）

pagePath 路径  text： 名称

实现

在发现页 页面中 ，使用事件 重置参数加载数据

onTabItemTap(e) {
		this.page = 1
		this.getList()
	}
},

 配合生命周期，当首次进入时不刷新，当我们再当前页，点击当前页导航时刷新

还是在 onLoad 的时候加载数据，通过一个变量去控制是否需要刷新页面数据

needRefresh: false

梳理一下点击后的逻辑，首次点击时不需要刷新数据，记录更新 needRefresh 的值，之后的点击就是在当前页的刷新了

onTabItemTap(e) {
	if (this.needRefresh) {
		uni.pageScrollTo({ // 回到顶部
			duration: 0,
			scrollTop: 0
		})
		this.page = 1
		this.getList()
	} else {
		this.needRefresh = true
	}
},

使用 onHide 页面隐藏的时候重置状态

onHide() {
	this.needRefresh = false
},