uni-app实现自定义导航栏并使用阿里小图标

最新推荐文章于 2024-03-12 17:19:47 发布
VIP文章 最新推荐文章于 2024-03-12 17:19:47 发布
阅读量1k 收藏 1
点赞数 2
分类专栏： uni-app 文章标签： web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42738839/article/details/106619817
版权
  1. 首先下载阿里小图标，将选好的小图标添加入库，选择下载代码在这里插入图片描述
    将下载好的代码解压，在这里插入图片描述
    将iconfont.ttf文件拷到static文件夹下，打开iconfont.json找到对应的unicode
    在这里插入图片描述
  2. 在main.json里面设置"navigationStyle": “custom”,对应的引入图标的text是在unicode前面加/u,比如“\ue503”,fontSrc为iconfont.ttf的路径，fontSize为图标大小，color为图标颜色
{
   
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
   
			"path": "pages/index/index",
最低0.47元/天 解锁文章
梦屿千寻li
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app-小程序自定义底部菜单样式示例
08-12
uni-app-小程序自定义底部菜单样式示例
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
12-13
最近一直在学习uni-app开发，由于uniapp是基于vue.js技术开发的，只要你熟悉vue，基本上很快就能上手了。 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明：app-plus配置，需注意 目前暂支持H5、App端，不支持小程序。 在page.json里配置app-plus即可 { "path": "pages/ucenter/index", "style": { "navigationBarTitleT
uni-app实现自定义导航栏，兼容H5、App、微信小程序
最新发布
为技术而生
03-12 1288
uni-app实现自定义导航栏，兼容H5、App、微信小程序 很多情况下，系统自带的导航栏无法满足UI设计的要求，这时候就需要我们自定义导航栏来实现需求，要考虑跨端的多种情况，这里我们封装成一个组件来使用...
uniapp组件-uni-search-bar搜索栏
热门推荐
~~
03-01 2万+
官方示例：https://ext.dcloud.net.cn/plugin?id=866 例1 -基础用法 <template> <view> <view> <uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @input="input" @cancel="cancel" @change="change" @clear="clea.
uni-app自定义搜索框-自定义按钮及搜索图标
Sun_lightYY的博客
02-18 6866
效果图： 布局代码： <!-- 搜索框 --> <view class="search-bar"> <view class="search-bar-box"> <image class="search-span" src="../../static/image/searchSpan.png"/> <input type="text" value="" placeholder="请输入搜索内容" class="search-tex
uniapp 引入icon，tabBar使用icon
weixin_45289656的博客
09-19 3840
uniapp 引入icon，tabBar使用icon
uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标
m0_45858045的博客
02-03 581
下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。
uni-app怎么自定义一个带图标的导航栏按钮
mini_1251861209的博客
11-30 9011
一、怎么修改 通过在page.json文件中配置页面的titleNView属性就可以自定义一个导航栏按钮， 其中还可以定义按钮的文字样式等等，最常见的就是定义一个图标按钮，但是不支持直接使用静态图片作按钮背景的方式，所以必须要引入一个字体图标，使用方法如下图： 二、字体图标怎么使用，text属性值怎么设置 具体的其他参数可以看官方文档，这里主要说明一下字体图标的使用，可以使用uni-a...
uniapp uni-search-bar组件使用及自定义图标设定
黎小小的博客
05-30 1999
uniapp 使用自定义icon图标__Jyann_的博客-CSDN博客如果要改变图标样式直接改变uni-searchbar__box即可：如将图标靠左显示// icon图标靠左。
uniapp app 导航自定义按钮图标
前端的路上
07-15 2019
1、https://www.iconfont.cn/ 2、选择图标，添加到项目中 3、下载到本地获取iconfont.ttf文件 4、复制iconfont.ttf 到相应路径 5、text 属性 uniapp里面中 直接使用 \ue995,就可以了 页面触发事件 // 扫码 onNavigationBarButtonTap() { uni.navigateTo({ url: "/...
uniapp 如何给搜索框设值_uni-app 顶部配置搜索框和左右图标
weixin_39827775的博客
12-20 620
顶部的图标只支持本地图片哈，所以你要将阿里巴巴上的图标下载到本地， 然后只要XXX.ttf这个文件就行了 然后放在static这个文件中 在pages.json中fontSrc进行引入。 text:使用unicode编码的时候，必须是\u开头哈。 配置时，层级不要写错了；否则就是现实不出来哈！ 我因为层级写错 整了好久了。代码如下 在pages.json文件的配置哈// 搜索配置"titleNVi...
uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip
12-17
uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip
uni-app-自定义标题栏示例.zip
08-12
uni-app-自定义标题栏示例.zip
解决uniapp的tabBar使用iconfont图标显示方块
qq_43687594的博客
07-29 1929
icon图标显示小方块，搜索了很多文档说需要将iconfont.css文件里的src改为绝对路径啥的，我不知道为啥，按照他们的改了之后，不报错，也出不来。不过丑话说前面，每个人报错的原因都不一定相同，请自己进行排查错误之后，再针对性参考别人的意见，当然，代码这东西很玄学，有的时候，什么都对，就是出不来，也不是没有可能的。想着就是需要简单的引入图标即可，但万万没想到，uniapp的坑，让我猝不及防，好在摸索了大半天，总算有个好的结果，为了记录这次跌倒的坑，决定写下来，希望能帮到其他人。
uni-ui的uni-search-bar 搜索栏代码解析(vue2)
m0_51066449的博客
05-25 3669
目录 1. 标签 1.1 插槽 2. vue配置项 2.1 data 2.2 emits 2.3 props 2.4 watch 2.5 methods 3. 指令 3.1 v-if/v-else 3.2 @click 4. 完整代码 1. 标签 1.1 插槽 在父组件中用如下模板替代对应的(<slot>标签里的内容)插槽内容(通过v-slot与name属性匹配)，如果父组件不提供slot内容，则会使用子组件的默认内容： <templ...
uniapp 解决tabBar增加图标问题
SSophia的博客
11-09 2459
uniapp开发app tabbar 首页字体和图标问题
uniapp 导航栏右侧 文字按钮/图标按钮 阿里巴巴矢量图引入
znx981912的博客
03-24 2696
添加代码至项目 引入css以及ttf文件→static文件夹 APP.vue引入css 文字不用引入外部文件 阿里巴巴矢量图需要引入先 监听导航栏点击方法 onNavigationBarButtonTap(e){ console.log(e); } 文字 { "path" : "pages/maintenance/maintain/inventory/inventory", "style" :
在uniapp、uni-admin中使用阿里巴巴矢量库自定义字体图标
夏夜追凉丶的博客
11-14 327
在uniapp、uni-admin中使用阿里巴巴矢量库自定义字体图标
uniapp 导航栏图标添加步骤
m0_65730686的博客
10-19 2485
uniapp 导航栏图标添加步骤
uni-app底部导航栏图标
08-18
要配置uni-app底部导航栏图标，首先需要准备好自己想要使用的图标，每个tab可以选择两个图标，分别为选中前的和选中后的。然后，根据uni-app官网提供的tabbar配置项进行配置。在pages数组中，每个页面需要指定其路径和样式，其中"navigationBarTitleText"表示导航栏标题文字内容，"enablePullDownRefresh"表示是否开启下拉刷新。默认页面的样式可以在globalStyle中设置，包括导航栏标题颜色、背景颜色等。最后，在tabBar配置项中，可以设置导航栏的边框样式、选中和未选中的颜色以及每个tab的页面路径、图标路径和文字内容。 以下是一个代码示例： ```json "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "配置底部导航栏" } }, { "path": "pages/mine/mine", "style": { "navigationBarTitleText": "我的", "enablePullDownRefresh": false } }, { "path": "pages/cate/cate", "style": { "navigationBarTitleText": "分类", "enablePullDownRefresh": false } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "配置底部导航栏", "navigationBarBackgroundColor": "#55aaff", "backgroundColor": "#ffff7f" }, "tabBar": { "borderStyle": "black", "selectedColor": "#FB7299", "color": "#444444", "list": [ { "pagePath": "pages/index/index", "iconPath": "static/tabbar/find.png", "selectedIconPath": "static/tabbar/find-selected.png", "text": "发现" }, { "pagePath": "pages/cate/cate", "iconPath": "static/tabbar/cate.png", "selectedIconPath": "static/tabbar/cate-selected.png", "text": "分类" }, { "pagePath": "pages/mine/mine", "iconPath": "static/tabbar/my.png", "selectedIconPath": "static/tabbar/my-selected.png", "text": "我的" } ] } ``` 在以上示例中，pages数组中指定了三个页面的路径和样式，globalStyle中设置了默认页面的样式，tabBar配置项中设置了底部导航栏的样式和图标信息。你可以根据自己的需求进行调整和修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【uniapp小程序】配置tabbar底部导航栏](https://blog.csdn.net/qq_49002903/article/details/126395789)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值