|
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"
}
有写得不够好的，望指正。 |
转播
