uni-app实现在标题栏里添加自定义按钮,设置按钮字体图片,点击事件。

1.下载字体图片文件并配置到项目里
下载字体图片链接
(1)进入首页,我下载了天猫精灵的字体图片
比绿流
(2)把想要的字体图片点击到购物车
比绿流
(3)进入购物车
比绿流
(4)添加到项目
比绿流
(5)下载到本地
比绿流
(6)解压好压缩包,修改好文件夹名称放到项目的static目录下
比绿流
(7)项目下新建一个目录common和一个icon.css文件
比绿流
(8)复制下载字体图片文件里面的iconfont.css的内容,粘贴到上一步新建的icon.css文件里
比绿流
(9)修改一下icon.css文件,把多余的url去掉
比绿流
(10)将字体文件的iconfont.ttf文件复制到static目录下
比绿流
(11)在项目的App.vue文件里引入icon.css
比绿流

2.配置pages.json文件,给标题栏添加自定义按钮
(1)打开项目的pages.json文件
比绿流
上图的字体图片的编号是在下载好的字体文件的demo_index.html文件上的,用浏览器打开
在这里插入图片描述
浏览器打开demo_index.html之后,选择Unicode,根据uni-app官方规则,写成 /ue697
比绿流
(2)标题栏按钮的点击事件
在index.vue文件里添加onNavigationBarButtonTap(e) {
}
下图的this.searhBle() 和 this.closeBLEConnection(),是我写的蓝牙方法。

比绿流
用真机或模拟器仿真应该就可以看到效果了。
比绿流

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐