uni 导航栏按钮点击触发事件

翎墨袅

于 2019-12-20 16:31:37 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_43840143/article/details/103634598

版权

本文详细介绍了如何在uni-app项目中配置页面导航栏的样式及按钮，并实现按钮的点击事件。通过pages.json文件设置导航栏标题、样式及按钮属性，结合yqhy.vue文件中的方法监听按钮点击，实现排行榜功能的调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

pages.json中：

{
            "path" : "pages/index/my/yqhy/yqhy",
            "style" : {
				"navigationBarTitleText": "邀请好友",
				"navigationBarTextStyle":"white",
				"navigationBarBackgroundColor":"#FE7837",
				"app-plus":{
					"titleNView": {
							"buttons": [ //这一段为按钮
								{
									"text": "排行榜", 
									"fontSize":"12",
									"float": "right"
								}
							]
						}
				}
				// "navigationStyle":"custom"
			}
        }

在这里插入图片描述
在yqhy.vue文件中

export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		},
		onNavigationBarButtonTap(e) {//点击事件
			console.log("success")		
		}
	}

在这里插入图片描述