onNavigationBarButtonTap 监听原生标题栏按钮点击事件

{
            "path": "pages/xxx/xxx",
            "style": {
                "navigationBarTitleText": "礼品上交",
                "app-plus": {
                    "titleNView": {
                        "buttons": [{
                            "text": "返回",
                            "fontSrc": "/static/iconfont.ttf",
                            "fontSize": "16px",
                            "color": "#000000",
                            "float": "left"
                        }]
                    }
                }
            }
        }

注意:
1 . 建议uni-app中单位全部用px,很多动态解析的upx会无效,出现很多隐形的问题,而使用px单位,静态hbuilder可以设置自动转换upx。

切记:APP修改了pages.json文件一定要重启,否则看不到效果!

二、 vue页面中监听导航栏自定义返回按钮事件 onNavigationBarButtonTap

在uniapp 中 getCurrentPages() 方法获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面.。
let page = pages[pages.length - 1];获取的即为当前页面栈,在当前页面栈 中从新调用onLoad 页面生命周期,即可刷新当前页let page = pages[pages.length - 2]; 即为上一页。

onNavigationBarButtonTap(e) {
			    const index = e.index;
			    if (index === 0) {
					let pages = getCurrentPages(); // 当前页面
					let beforePage = pages[pages.length - 2]; // 前一个页面
					uni.navigateBack({
						success: function() {
							beforePage.onLoad(); // 执行前一个页面的onLoad方法
							},
					});
			    }
			},

 

 

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以通过在 App.vue 中监听底部导航栏的点击事件来实现全局监听。具体步骤如下: 1. 在 App.vue 中引入 uni-app 的 tabBar 组件。 ``` <template> <div> <tab-bar :list="tabBarList" @change="onTabBarChange"></tab-bar> <router-view /> </div> </template> <script> import tabBar from '@/components/tab-bar/tab-bar.vue' export default { components: { tabBar }, data() { return { tabBarList: [ { iconPath: 'static/tab-bar/home.png', selectedIconPath: 'static/tab-bar/home-active.png', text: '首页', pagePath: '/pages/home/home' }, { iconPath: 'static/tab-bar/mine.png', selectedIconPath: 'static/tab-bar/mine-active.png', text: '我的', pagePath: '/pages/mine/mine' } ] } }, methods: { onTabBarChange(e) { console.log('tabBar change', e) } } } </script> ``` 2. 在 tabBar 组件中触发 change 事件。 ``` <template> <div class="tab-bar"> <div class="tab-bar-item" v-for="(item, index) in list" :key="index" @click="handleClick(index)"> <img :src="item.selected ? item.selectedIconPath : item.iconPath" /> <div>{{ item.text }}</div> </div> </div> </template> <script> export default { props: { list: { type: Array, default: () => [] } }, methods: { handleClick(index) { this.list.forEach((item, i) => { item.selected = i === index }) this.$emit('change', index) } } } </script> ``` 3. 在其他页面中使用 tabBar 组件。 ``` <template> <div> <text>这是首页</text> </div> </template> <script> export default { onTabBarChange(index) { console.log('index:', index) } } </script> ``` 通过在 App.vue 中监听 tabBar 组件的 change 事件,可以在任何页面中都能够触发该事件,从而实现全局监听底部导航栏的点击事件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值