不用学习直接编写uni-app(导航栏自定义样式及相关问题)

秒速五厘米 2022-01-31 15:13 183阅读 0赞

1、自定义导航栏样式可以在文件中定义,格式如下：

"pages" : \[\{

"path" : "pages/index/index", //默认在index.vue中添加按钮

"style" : \{

"navigationBarTitleText" : "XXXXX", //标题名

"titleNView": \{

"backgroundcolor": "red",

"titletext": "iflower",

"titlecolor": "\#000000",

"buttons": \[\{ //添加自定义按钮入口

//此处引用阿里图标库图标//（请参考[https://www.jianshu.com/p/5347eabff1e4][https_www.jianshu.com_p_5347eabff1e4]）

"text": "\\ue609",

"fontSrc": "/static/font/iconfont.ttf",

"fontSize": "22px",

"float": "left", //靠左第一个

"id":"leftMenu" //自定义字段，用于以后对按钮事件处理

\},\{

"text": "\\ue639",

"fontSrc": "/static/font/iconfont.ttf",

"fontSize": "22px",

"float": "right", //靠右第一个

"id":"xiaoxi",

"redDot":true //默认图标按钮右上角有红色点状标志

\},\{

…… //其他按钮配置

\}\]

\},\{

…… //其他页面配置

\}\]

2、配置好界面，导航栏效果如下

![20190516223633795.png][]

3、在index.vue页面添加导航栏按钮click监听事件

在<script>标签下的export default \{\}中添加监听，格式如下。

export default \{

data() \{

return \{

…… //其他初始化产生声明

isLeftShow: false, //左侧导航栏

\},

onNavigationBarButtonTap(e) \{ //导航栏自定义按钮点击监听事件

/\*\* 打印e的结果

\{"text" : "" , "fontSrc" : "/static/font/iconfont.ttf" , "fontSize" : "22px" , "float" : "right" , "id" : "xiaoxi" , "redDot" : true , "\_\_cb\_\_" : \{"id" : "plus91557906063813" , "htmlId" : "204513757" \} , "index" : 1 \}

\*\*/

console.log(JSON.stringify(e));

switch(e.id)\{

case "saoyisao": //二维码扫描

uni.scanCode(\{ //调用uni手机默认扫描二维码时间

success:function(res)\{

/\*\* 打印二维码扫描后的结果 //console.log(JSON.stringify(res));

\{ "result" : [http://www.baidu.com][http_www.baidu.com] , "scanType" : "QR\_CODE" , "charSet" : "utf8" , "path" : "" , "errMsg" : "scanCode:ok" \}

\*\*/

if(res && res.errMsg && res.errMsg == "scanCode:ok")\{

uni.showToast(\{ //uni默认吐司

title: '扫描成功！', //提示内容

duration: 2000 //提示显示时间

\});

uni.navigateTo(\{ //跳转页面及传参

url: '../webview/webview?url='+res.result

\});

break;

case "leftMenu": //跳转页面及

this.isLeftShow = !this.isLeftShow;

break;

case "xiaoxi": //消息提醒

//获取导航栏指定按钮

let pages = getCurrentPages();

let page = pages\[pages.length - 1\];

let currentWebview = page.$getAppWebview();

let titleObj = currentWebview.getStyle().titleNView;

//console.log(JSON.stringify(titleObj.buttons\[e.index\]));

//修改指定按钮样式

if(titleObj.buttons\[e.index\].redDot)\{ //取消按钮右上角红点

titleObj.buttons\[e.index\].redDot = false;

currentWebview.setStyle(\{

titleNView: titleObj

\});

break;

\},

components: \{

//导入模型加载

\},

computed: \{

//标签初始化执行函数入口

\},

methods: \{

//其他方法入口

[https_www.jianshu.com_p_5347eabff1e4]: https://www.jianshu.com/p/5347eabff1e4
[20190516223633795.png]: /images/20220131/3039e86ae37e4e34a4ab76917cbfc845.png
[http_www.baidu.com]: http://www.baidu.com