/*** isBack 是否返回按钮 title 标题 titleTintColor 标题颜色 bgColor 背景 center 标题居中 search 搜索条 searchRadius 圆形搜索条 fixed 是否固定 */
<template> <view :style="style"> <view :class="[fixed ? 'fixed' : '']" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleTintColor}, bgColor]"> <!-- 返回 --> <!-- <text v-if="isBack" @tap="goBack"></text> --> <view v-if="isBack" @tap="goBack"> <slot></slot> </view> <slot></slot> <!-- 标题 --> <!-- #ifndef MP --> <view v-if="!search && center"></view> <!-- #endif --> <view :class="[center ? 'uni_titleCenter' : '']" :style="[isBack ? {'font-size': '32upx', 'padding-left': '0'} : '']" v-if="!search && title"> {{title}} </view> <view :class="[searchRadius ? 'uni_searchRadius' : '']" v-if="search"> /> <input type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" /> </view> <!-- 右侧 --> <view> <slot></slot> <slot></slot> <slot></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>
最后附上一个基于ReactNative实现的自定义导航条的聊天室项目
总结
以上所述是小编给大家介绍的uni app仿微信顶部导航条功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: