共计 3696 个字符,预计需要花费 10 分钟才能阅读完成。
前言
最近在学习 uni-app,由于是基于 vue.js 技术开发的,只要你熟悉 vue,基本上很快就能上手了。在 uni-app 里面如何实现一些自定导航,比如支持一些标题、按钮、搜索、城市选择。。。
uniapp 原生导航
对于一些不是很复杂的顶部导航,当然使用原生导航栏实现是最佳选择
uni-app 原生导航栏也能实现一些顶部自定义按钮 + 搜索框,只需在 page.json 里面做一些配置即可。设置 app-plus,不过目前暂支持 H5、App 端,不支持小程序。
dcloud 平台 app-plus 配置
在项目 page.json 里面配置 app-plus
{
"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":{...}
}
}
}
},
那么如何监听按钮、输入框事件?uni-app 给出了相应 API,只需把 onNavigationBarButtonTap 和 onNavigationBarSearchInputChanged,写在相应的页面中即可。
uniapp 自定义导航栏
如何实现像淘宝、微信顶部导航栏,支持背景渐变、标题居左、居中、搜索条、按钮自定义。。。
将 navigationStyle 设为 custom 或 titleNView 设为 false 时,原生导航栏不显示,这时就能自定义导航栏 "globalStyle": {"navigationStyle": "custom"}
具体效果实例如下:
在 App.vue 里面需要对顶部状态栏进行高度处理
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
}
})
},
<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>
<!-- <text slot="string" class="uni_btnString" @tap="ccc"> 添加好友 </text> -->
<image slot="image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd"></image>
</header-bar>
<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>
<template>
<view class="uni_topbar" :style="style">
<view class="inner flexbox flex_alignc" :class="[fixed ?'fixed':'']":style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleTintColor}, bgColor]">
<!-- 返回 -->
<!-- <text class="uni_icoBack iconfont icon-arrL" v-if="isBack" @tap="goBack"></text> -->
<view v-if="isBack" @tap="goBack">
<slot name="back"></slot>
</view>
<slot name="headerL"></slot>
<!-- 标题 -->
<!-- #ifndef MP -->
<view class="flex1" v-if="!search && center"></view>
<!-- #endif -->
<view class="uni_title flex1" :class="[center ?'uni_titleCenter':'']":style="[isBack ? {'font-size': '32upx', 'padding-left': '0'} : '']" v-if="!search && title">
{{title}}
</view>
<view class="uni_search flex1" :class="[searchRadius ?'uni_searchRadius':'']"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: [Boolean, String], default: true },
title: {type: String, default: ''},
titleTintColor: {type: String, default: '#fff'},
bgColor: Object,
center: {type: [Boolean, String], default: false },
search: {type: [Boolean, String], default: false },
searchRadius: {type: [Boolean, String], default: false },
fixed: {type: [Boolean, String], default: false },
},
computed: {style() {let _style = `height: ${this.customBarH}px;`
return _style
}
},
methods: {goBack() {uni.navigateBack()
}
}
}
</script>