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"
}

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

uniapp 微信小程序导航栏不起作用相关推荐

uni-app 微信小程序导航栏navigationBar 安卓不居中问题
1.直接去掉导航栏在界面里自定义导航栏在pages.json中style添加 "globalStyle": {"navigationBarTextStyle" ...
uniapp 微信小程序导航栏设置背景颜色字体颜色
{"path": "pages/company","style":{"navigationBarTitleText": ...
uni-app 微信小程序导航栏隐藏返回隐藏小房子
问题隐藏返回按钮跳页方式 uni.navigateTo({url:"../warranty/warranty"}) 解决更改跳页方式 wx.reLaunch() /uni.r ...
微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...
如何去掉微信小程序导航栏，以及禁止页面滑动
如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...
微信小程序导航栏高度。分析手机状态栏高度、微信小程序胶囊高度等。
//获取系统信息的概念 console.log(uni.getSystemInfoSync()); let res = uni.getSystemInfoSync() //胶囊按钮的信息 consol ...
微信小程序导航栏制作
导航栏制作微信小程序不同于H5,制作导航栏不方便,尤其是对于一个初学者来看:以为微信小程序中的Js与H5中的差不多,其实不然,以下就是我在学习微信小程序中制作的小程序导航栏. 页面代码 <vi ...
微信小程序导航栏怎么写
微信小程序写到到导航栏还是非常简单得,就算没有三大框架的基础,也是非常容易理解`的. 接下来我们看看他是如何操作的: 以电商页面中常见的导航为例,会了这一种,就是会了很多种,到时根据具体需求改动即可: ...
使用taro自定义微信小程序导航栏
1.在app.config.js中的window配置项的内容替换为:"navigationStyle":"custom" custom表示自定义导航栏,但会保留 ...

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

uniapp 微信小程序导航栏不起作用相关推荐

最新文章

热门文章