一、阿里巴巴矢量图选出自己想要的图标:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
添加到自己的项目里,下载至桌面
二、将解压好的项目打开,将两个文件复制到自己项目的static文件夹中:
三、在page页面去使用
"titleNView":{
"type":"default",
"buttons":[{
"text": "\ue618",
"fontSrc": "/static/font/iconfont.ttf",
"fontSize": "22px",
"color":"#fff",
"float": "right"
},{
"text": "\ue607",
"fontSrc": "/static/font/iconfont.ttf",
"fontSize": "22px",
"color":"#fff",
"float": "left"
}]
}
1.需要注意的点:text的值是去iconfont.css里面找对应的图标,列:(在使用的时候一定要在e前面加u才能正常显示)
.iconshezhi:before {
content: "\e618"; /* 使用:\ue618 */
}
2.fontSrc引入.ttf的文件,大小 ,颜色,位置正常写就是了
四、设置点击事件:在my页面中添加如下代码(与data和onload同级):
export default {
data() {
return {
}
},
onNavigationBarButtonTap(e) {
if(e.float=='right'){
console.log("你点击了设置")
}else{
console.log("你点击了扫一扫")
}
},
methods: {
}
}