uniapp 微信小程序导航栏不起作用

2024-06-29 13:24| 来源: 网络整理| 查看: 265

uni-app导航只需要在pages.json里面修改app-plus

{ "path": "pages/index/index", "style": { "app-plus":{ "scrollIndicator":"none", "titleNView":{ "searchInput":{ "align":"center", "backgroundColor":"#F7F7F7", "borderRadius":"4px", "placeholder":"搜索爱宠", "placeholderColor":"#CCCCCC", "disabled":false } } } } }

但是在小程序中不起作用，想要自定义导航栏要用别的方法，我用的是使用组件的方法。

首先新建一个项目，选择的是uniapp的模板，选中hello uni-app，创建

然后，将components这个文件夹，整个文件夹复制到我们的项目中，和pages同一级目录，在中引入组件

import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue" export default { components:{ uniNavBar } }

页面的写法,我这里是写了个input框，不需要input框的小伙伴也可以去掉，然后在组件里面可以设置title，backgroungcolor等。

做出来的效果是这样的

将input去掉，设置为导航栏的写法如下，不需要leftIcon的可以去掉

效果如下，长度可以自己设置

--------------------------------------------------------------------------------------------------

这里补充一点，引入组件的还有个好处就是可以直接引用里面的icon，美化我们的页面，当然你也可以引入第三方工具，阿里巴巴图库等，因为icon还是相对来说比较少点。我们可以在components>uni-icons>icons.js下寻找我们需要的icon。

export default { "pulldown": "\ue588", "refreshempty": "\ue461", "back": "\ue471", "forward": "\ue470", "more": "\ue507", "more-filled": "\ue537", "scan": "\ue612", "qq": "\ue264", "weibo": "\ue260", "weixin": "\ue261", "pengyouquan": "\ue262", "loop": "\ue565", "refresh": "\ue407", "refresh-filled": "\ue437", "arrowthindown": "\ue585", "arrowthinleft": "\ue586", "arrowthinright": "\ue587", "arrowthinup": "\ue584", "undo-filled": "\ue7d6", "undo": "\ue406", "redo": "\ue405", "redo-filled": "\ue7d9", "bars": "\ue563", "chatboxes": "\ue203", "camera": "\ue301", "chatboxes-filled": "\ue233", "camera-filled": "\ue7ef", "cart-filled": "\ue7f4", "cart": "\ue7f5", "checkbox-filled": "\ue442", "checkbox": "\ue7fa", "arrowleft": "\ue582", "arrowdown": "\ue581", "arrowright": "\ue583", "smallcircle-filled": "\ue801", "arrowup": "\ue580", "circle": "\ue411", "eye-filled": "\ue568", "eye-slash-filled": "\ue822", "eye-slash": "\ue823", "eye": "\ue824", "flag-filled": "\ue825", "flag": "\ue508", "gear-filled": "\ue532", "reload": "\ue462", "gear": "\ue502", "hand-thumbsdown-filled": "\ue83b", "hand-thumbsdown": "\ue83c", "hand-thumbsup-filled": "\ue83d", "heart-filled": "\ue83e", "hand-thumbsup": "\ue83f", "heart": "\ue840", "home": "\ue500", "info": "\ue504", "home-filled": "\ue530", "info-filled": "\ue534", "circle-filled": "\ue441", "chat-filled": "\ue847", "chat": "\ue263", "mail-open-filled": "\ue84d", "email-filled": "\ue231", "mail-open": "\ue84e", "email": "\ue201", "checkmarkempty": "\ue472", "list": "\ue562", "locked-filled": "\ue856", "locked": "\ue506", "map-filled": "\ue85c", "map-pin": "\ue85e", "map-pin-ellipse": "\ue864", "map": "\ue364", "minus-filled": "\ue440", "mic-filled": "\ue332", "minus": "\ue410", "micoff": "\ue360", "mic": "\ue302", "clear": "\ue434", "smallcircle": "\ue868", "close": "\ue404", "closeempty": "\ue460", "paperclip": "\ue567", "paperplane": "\ue503", "paperplane-filled": "\ue86e", "person-filled": "\ue131", "contact-filled": "\ue130", "person": "\ue101", "contact": "\ue100", "images-filled": "\ue87a", "phone": "\ue200", "images": "\ue87b", "image": "\ue363", "image-filled": "\ue877", "location-filled": "\ue333", "location": "\ue303", "plus-filled": "\ue439", "plus": "\ue409", "plusempty": "\ue468", "help-filled": "\ue535", "help": "\ue505", "navigate-filled": "\ue884", "navigate": "\ue501", "mic-slash-filled": "\ue892", "search": "\ue466", "settings": "\ue560", "sound": "\ue590", "sound-filled": "\ue8a1", "spinner-cycle": "\ue465", "download-filled": "\ue8a4", "personadd-filled": "\ue132", "videocam-filled": "\ue8af", "personadd": "\ue102", "upload": "\ue402", "upload-filled": "\ue8b1", "starhalf": "\ue463", "star-filled": "\ue438", "star": "\ue408", "trash": "\ue401", "phone-filled": "\ue230", "compose": "\ue400", "videocam": "\ue300", "trash-filled": "\ue8dc", "download": "\ue403", "chatbubble-filled": "\ue232", "chatbubble": "\ue202", "cloud-download": "\ue8e4", "cloud-upload-filled": "\ue8e5", "cloud-upload": "\ue8e6", "cloud-download-filled": "\ue8e9", "headphones":"\ue8bf", "shop":"\ue609" }

有写得不够好的，望指正。

【本文地址】

公司简介

联系我们