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

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同一级目录，在<script></script>中引入组件

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

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

<template>
	<view>
		<!-- 头部搜索框 -->
		<view class="content">
			<uni-nav-bar leftIcon="camera" rightIcon="search" color="black">
				<input placeholder="搜索爱宠" style="border: none;"/>
			</uni-nav-bar>
		</view>
    </view>
</template>

做出来的效果是这样的

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

<uni-nav-bar leftIcon="camera" rightIcon="search" color="black" title="首页" background-color="#00c170">
</uni-nav-bar>

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

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

 

这里补充一点，引入组件的还有个好处就是可以直接引用里面的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"
}

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