uni-app原生导航配置顶部自定义按钮以及图标

uni-app原生导航配置顶部自定义按钮以及图标

uni-app原生导航配置顶部自定义按钮以及图标,如果把uni去做安卓端,那么在导航栏的右侧少不了按钮或者图标。有两种方式可以满足右侧的图标,方式一当然是大佬的口头禅:这东西自己从新写一个不就好了吗。方式二:原生头部pages中配置  

uni-app原生导航配置顶部自定义按钮以及图标 1

(小小壁纸,喜欢就收藏把)

步骤一:

新建一个项目名字随意(万个)

uni-app原生导航配置顶部自定义按钮以及图标

步骤二

pages.json文件配置indx页面导航栏,随后保存就可以看到我们的导航栏右侧多了一个文字按钮,那如何做点击效果呢

"style": {
	"navigationBarTitleText": "我是一个小小案例",
	"app-plus": {
		"titleNView": {
				"buttons": [{
					"text": "关于",
					"fontSize": "14"
				}
			]
		}
	}
}

如果需要配置图标

"style": {
	"navigationBarTitleText": "导航栏带自定义按钮",
		"app-plus": {
				"titleNView": {
						"buttons": [{
								"type": "share"
					}
				]
		}
	}
}

这个需要引入图标文件,在index页面下script中

import uniIcon from '@/components/uni-icon/uni-icon.vue'

且注册插件

components:{
			uniIcon
		}

 

步骤三

index页面下script中

onNavigationBarButtonTap(e) {
		uni.showToast({
			title: '你点我干啥'
		});
	},

也是做跳转之类的哈

uni-app原生导航配置顶部自定义按钮以及图标

 

 

 

分享到 :
相关推荐

uni星茫V3.0更新uni-app多端小程序源码丸子插件wordpress后台

晚风踩着云朵,月亮贩卖寂寞,而你来自万顷银河,是我翘首以盼的快乐————uni星茫[...

uni星茫视频配置教程安装hbuilder修改代码

《哈尔的移动城堡》里有这样一句话,不如就承认一下,我们没有那样坚强,也不想那样刀枪不...

星宿UI V0.7 wordpress开源小程序 分类限制 微信引流方式

不要轻易去依赖一个人,它会成为你的习惯,当分别来临,你失去的不是某个人,而是你精神的...

解决mui 顶部选项卡左右滑动min-height高度实现全屏

解决mui顶部选项卡左右滑动min-height高度实现全屏2019.07.04[&...

发表评论

邮箱地址不会被公开。 必填项已用*标注

评论(12)

  • 枫瑞博客 普通用户 回复 洛神 09/16/2019

    我只是新手目前不能做呢

  • 洛神 游客 09/13/2019

    提供网站的api找人用uni app写软件大约需要多少钱呢?博主 😥

  • 枫瑞博客 普通用户 回复 xx 09/12/2019

    腾讯云学生机

  • xx 游客 09/12/2019

    博主的小程序主机配置是啥,感觉挺快的嘛

  • 夏有乔木雅望天堂 普通用户 09/11/2019

    夏季自修

  • 普通用户 09/11/2019

    快快快快

  • 新的一天新的开始 普通用户 09/11/2019

    666