uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

馒头和小包子 發表於 2019-9-17 01:19:00

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

最近一直在学习uni-app开发，由于uniapp是基于vue.js技术开发的，只要你熟悉vue，基本上很快就能上手了。
在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明：app-plus配置，需注意目前暂支持H5、App端，不支持小程序。
<h3>最新版uniapp+vue3跨端ai流式输出模板</h3>
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190917001617625-1630644873.png">
在page.json里配置app-plus即可
<div class="cnblogs_code">
<pre>{
"path": "pages/ucenter/index",
"style": {
 "navigationBarTitleText": "我的",
 "app-plus": {
 "titleNView": {
 "buttons": [
 {
 "text": "\ue670",
 "fontSrc": "/static/iconfont.ttf",
 "fontSize": "22px",
 "float": "left"
 },
 {
 "text": "\ue62c",
 "fontSrc": "/static/iconfont.ttf",
 "fontSize": "22px"

 }
 ],
 "searchInput":{
 ...
 }
 }
 }
}
},</pre>
</div>
对于如何监听按钮、输入框事件，uni-app给出了相应API，只需把onNavigationBarButtonTap和onNavigationBarSearchInputChanged，写在响应的页面中即可。
那如何可以实现像京东、淘宝、微信顶部导航栏，如加入城市定位、搜索、自定图片/图标、圆点提示。。。
上面的方法是可以满足一般项目需求，但是在小程序里则失效了，而且一些复杂的导航栏就不能很好兼顾，这时只能寻求其它替代方法了
将navigationStyle设为custom或titleNView设为false时，原生导航栏不显示，这时就能自定义导航栏
"globalStyle": { "navigationStyle": "custom" }
下面是简单测试实例：
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190917004112730-1765270245.png">
这里要注意的是，H5、小程序、App端状态栏都不一样，需要重新计算处理，我这里已经处理好了，可直接使用，在App.vue里面设置即可
<div class="cnblogs_code">
<pre>onLaunch: function() {
uni.getSystemInfo({
 success:function(e){
 Vue.prototype.statusBar = e.statusBarHeight
 // #ifndef MP
 if(e.platform == 'android') {
 Vue.prototype.customBar = e.statusBarHeight + 50
 }else {
 Vue.prototype.customBar = e.statusBarHeight + 45
 }
 // #endif

 // #ifdef MP-WEIXIN
 let custom = wx.getMenuButtonBoundingClientRect()
 Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
 // #endif

 // #ifdef MP-ALIPAY
 Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
 // #endif
 }
})
},</pre>
</div>
啧啧啧，看下面的效果，是不是觉得很眼熟，没错，就是基于uni-app简单的实现了一个仿微信顶部导航条
顶部的图标使用iconfont字体图标、另外还可自定传入图片
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190917005434450-548953044.png">
<div class="cnblogs_code">
<pre><header-bar :isBack="false" title="标题信息" titleTintColor="#fff">
<text slot="back" class="uni_btnIco iconfont icon-arrL"></text>
<text slot="iconfont" class="uni_btnIco iconfont icon-search" @tap="aaa"></text>
<text slot="iconfont" class="uni_btnIco iconfont icon-tianjia" @tap="bbb"></text>

<image slot="image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd"></image>
</header-bar></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190917005444239-1496544395.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190917005452366-1077530407.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190917005513931-1302339406.png">
<div class="cnblogs_code">
<pre><header-bar :isBack="true" titleTintColor="#fff" :bgColor="{'background-image': 'linear-gradient(45deg, #007AFF 10%, #005cbf)'}" search>
<text slot="back" class="uni_btnIco iconfont icon-arrL"></text>
<text slot="iconfont" class="uni_btnIco iconfont icon-choose03" @tap="aaa"></text>
<image slot="image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd"></image>
</header-bar></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190917005525520-1224259212.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190917005534739-1407039119.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190917005542901-1696079199.png">
<div class="cnblogs_code">
<pre><header-bar :isBack="true" title="我的" titleTintColor="#fff" :bgColor="{background: '#353535'}">
<text slot="back" class="uni_btnIco iconfont icon-close"></text>
<text slot="iconfont" class="uni_btnIco iconfont icon-search"></text>
<text slot="string" class="uni_btnString" style="color: #2B9939;">添加好友</text>
</header-bar></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190917005552633-251369223.png">
支持传入的属性，另外还用到了vue插槽slot
<div class="cnblogs_code">
<pre>/*** 　　isBack 是否返回按钮
　　title 标题
　　titleTintColor 标题颜色
　　bgColor 背景
　　center 标题居中
　　search 搜索条
　　searchRadius 圆形搜索条
　　fixed 是否固定 */</pre>
</div>
<div class="cnblogs_code">
<pre><template>
<view class="uni_topbar" :style="style">
 <view class="inner flexbox flex_alignc" :class="" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleTintColor}, bgColor]">
 
 
 <view v-if="isBack" @tap="goBack">
 <slot name="back"></slot>
 </view>
 <slot name="headerL"></slot>
 
 
 <view class="flex1" v-if="!search && center"></view>
 
 <view class="uni_title flex1" :class="" :style="" v-if="!search && title">
 {{title}}
 </view>
 <view class="uni_search flex1" :class="" v-if="search"> />
 <input class="uni_searchIpt flex1" type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" />
 </view>
 
 <view class="uni_headerRight flexbox flex_row flex_alignc">
 <slot name="iconfont"></slot>
 <slot name="string"></slot>
 <slot name="image"></slot>
 </view>
 </view>
</view>
</template>

<script>
export default {
 data() {
 return {
 statusBarH: this.statusBar,
 customBarH: this.customBar
 }
 },
 props: {
 isBack: { type: , default: true },
 title: { type: String, default: '' },
 titleTintColor: { type: String, default: '#fff' },
 bgColor: Object,
 center: { type: , default: false },
 search: { type: , default: false },
 searchRadius: { type: , default: false },
 fixed: { type: , default: false },
 },
 computed: {
 style() {
 let _style = `height: ${this.customBarH}px;`
 return _style
 }
 },
 methods: {
 goBack() {
 uni.navigateBack()
 }
 }
}
</script></pre>
</div>
<blockquote>
<h4>最后附上几个最新uniapp+vue3原创实战项目案例😏😏</h4>
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
uniapp-welive仿微信/抖音直播带货|uni-app+vue3+pinia短视频直播商城
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
</blockquote>
目前自定义弹框+导航条+底部Tabbar组件已经发布到了插件市场，免费下载使用。
https://ext.dcloud.net.cn/plugin?id=13799
https://ext.dcloud.net.cn/plugin?id=5592 https://ext.dcloud.net.cn/plugin?id=5593
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190917011211099-200184283.jpg">
 

</div>
<div id="MySignature" role="contentinfo">
本文为博主原创文章，未经博主允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310） 
来源：https://www.cnblogs.com/xiaoyan2017/p/11531238.html

頁: [1]

琼殿技术论坛's Archiver

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条