uni 自定义导航条文字、文字图标按钮及点击按钮的事件
程序员文章站
2022-07-13 12:40:15
...
{
"path": "pages/off-line/off-line-details/off-line-details",
"style": {
"navigationBarTitleText": "线下活动详情",
"navigationBarBackgroundColor": "#fff",
"app-plus": {
"bounce": "none",
"titleNView": {
"titleColor": "#333",
"titleSize": "36upx",
"titleText": "线下活动详情",
"splitLine": true,
"buttons": [{
"text": "发布",
"fontSize": "42upx",
"float": "right",
"color": "#333333"
}]
}
}
}
}
buttons 下面是设置文字按钮的地方
buttons > text 文字按钮的内容 color 文字的颜色 fontSize 文字的大小 float 显示的地方
自定义 导航条图标按钮
{
"path": "pages/off-line/off-line-details/off-line-details",
"style": {
"navigationBarTitleText": "线下活动详情",
"navigationBarBackgroundColor": "#fff",
"app-plus": {
"bounce": "none",
"titleNView": {
"titleColor": "#333",
"titleSize": "36upx",
"titleText": "线下活动详情",
"splitLine": true,
"buttons": [{
"text": "\ue6c1",
"fontSize": "42upx",
"float": "right",
"color": "#333333",
"fontSrc": "/static/iconfont.ttf"
}]
}
}
}
}
buttons 下面是设置字体图标按钮的地方
首先要去iconfont生成 .ttf的文件 放入静态资源 static下面
buttons > text 文字按钮的内容
color 文字的颜色 fontSize 文字的大小
float 显示的地方
fontWeight 按钮上文字的粗细。可取值"normal"-标准字体、“bold”-加粗字体。
text 按钮上显示的文字。使用字体图标时 unicode 字符表示必须 ‘\u’ 开头,如 “\ue123”(注意不能写成"\e123")。
fontSize 按钮上文字使用的字体文件路径。不支持网络地址,请统一使用本地地址。
width 按钮的宽度,可取值: “*px” - 逻辑像素值,如"10px"表示10逻辑像素值,不支持rpx。按钮的内容居中显示; “auto” - 自定计算宽度,根据内容自动调整按钮宽度
导航条 图标点击事件 ps:不能写到 methods 里面
onNavigationBarButtonTap(e) {
console.log(“按钮点击事件”)
}
上一篇: 12:jquery查找