首页课件丨教程安装教程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原生导航配置顶部自定义按钮以及图标

 

 

 

声明: 1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:ceo@zunw.cn,我们将第一时间处理! 2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持 3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明。

给TA赏金
共{{data.count}}人
人已赏金
安装教程

题库答题微信小程序案例源码-适用于表单提交

2022-11-13 17:18:52

安装教程

uni-app使用Map地图组件微信小程序显示公司位置

2022-11-13 17:19:04

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
MySSL 安全签章