uni-app 自定义导航栏

效果图

隐藏小程序底部导航栏

封装组件

在 components 文件夹中新建一个 tabbar.vue 文件

<template><view class="tabbar"><view class="tarbar-list"><view class="barPart" @click="changPage(index)" v-for="(list , index) in tabBar.list" :key="index"><image :src="selected == index ? list.selectedIconPath : list.iconPath":style="{ bottom : index == 1 ? '30'+'rpx':'36'+'rpx', marginLeft : index == 1 ? '34'+'rpx':'42'+'rpx', width : list.iconWith+'rpx' , height : list.iconHeight+'rpx'}"></image><view :style='{color: selected == index ? tabBar.selectedColor : tabBar.color}'>{{list.text}}</view></view><view class="release" @click="toRelease"><image class="release_icon" src="../static/首页/icon_发布.png"></image></view></view></view>
</template><script>export default {data() {return {tabBar: {color: '#A9A9A9',selectedColor: '#000000',list: [{iconPath: "../static/首页/物品丢失.png",selectedIconPath: "../static/首页/物品丢失-1.png",text: '失物招领',pagePath: "/pages/index/index",iconWith: '50',iconHeight: '50',},{iconPath: "../static/首页/跑腿APP.png",selectedIconPath: "../static/首页/跑腿APP-1.png",text: '校园跑腿',pagePath: "/pages/errand/errand",iconWith: '64',iconHeight: '64',},]},selected: this.current,}},//接收父组件传来的参数props: {//参数名current: {type: [Number, String], //参数类型default: 0 //默认值},},methods: {changPage(index) {//页面跳转uni.switchTab({url: this.tabBar.list[index].pagePath,fail: (err) => {console.log(err);}})//改变选中下标this.selected = index;if (this.selected == index) {return}this.$emit('change', index)},// 点击发布toRelease() {uni.navigateTo({url: '/pages/release/release',})}},}
</script><style scoped lang="less">.tarbar-list {display: flex;align-items: flex-end;justify-content: space-between;padding: 0 48rpx;box-sizing: border-box;height: 100rpx;background-color: #fff;border-radius: 26px 26px 0px 0px;box-shadow: 0px -2px 6px 0px rgba(225, 225, 225, 40);position: fixed;bottom: 0;width: 100%;}.release {position: absolute;background: linear-gradient(180deg, rgba(68, 193, 175, 1) 0%, rgba(10, 206, 206, 0) 100%);border-radius: 50%;left: 50%;top: -16rpx;transform: translateX(-50%);width: 112rpx;height: 112rpx;display: flex;align-items: center;justify-content: center;.release_icon {display: block;width: 60rpx;height: 60rpx;transform: translateY(-6rpx);}}.barPart {width: 20%;font-size: 24rpx;}.barPart>view {text-align: center;}.barPart>image {bottom: 36rpx;position: fixed;margin-left: 40rpx;object-fit: cover;object-position: center;}
</style>

页面引入组件

引入组件：

import tabbar from "../../components/tabbar.vue"

通过父子组件传参改变跳转后页面的默认下标：

<!-- 自定义导航栏 -->
<tabbar :current="current"></tabbar>data() {return {current:0//默认下标}
},
components: {tabbar
},

uni-app 自定义导航栏相关推荐

android 自定义标签导航栏,自定义导航栏app下载-自定义导航栏（Custom Navigation Bar）安卓版v0.4.3-PC6安卓网...
自定义导航栏(Custom Navigation Bar)app是款非常好用的实用工具,自定义导航栏能让你自己设置个性的导航栏,再也不用为单调的导航栏而发愁,独特且唯一,感兴趣的朋友就来下载自定义导航 ...
uniapp自定义导航栏，高度，自定义组件
设置自定义导航栏 :globalStyle 内 navigationStyle": "custom" 配置页面:pages.json "globalStyle& ...
uniapp中自定义导航栏
相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这个时候就需要我们自己自定义导航栏使用啦. 当然u ...
uni-app自定义导航栏
有时我们需要对导航栏进行自定义,接下来就是对uni-app进行代码的编写对于一些不是很复杂的顶部导航,当然使用原生导航栏实现是最佳选择 uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只 ...
微信小程序自定义导航栏完整适配方案
写这篇博客的背景临近节日,产品想给小程序首页头部设置图片背景,这个只能自定义导航栏来实现当然除了自定义背景图,还可以放置其他组件,按钮.搜索框等实践部分设备状态栏.胶囊.间距的高度(仅供参考)( ...
修改自定义导航栏按钮文字内容的方法
第一步在 pages.json 内部定义原生导航栏搜索框和按钮 {"path": "pages/tabbar/dingdan/dingdan","s ...
使用uniapp编译多端，自定义导航栏高度、状态栏的高度
使用uniapp框架编译多端,在使用自定义导航栏的时候需要适配不同手机,在安卓和ios上手机的状态栏高度是不一样的,尤其是小程序. uni.getSystemInfo(); //在小程序上使用这个方法 ...
微信小程序自定义导航栏，只保留右上角胶囊按钮
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. navigationStyle 导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航 ...
iOS个人中心渐变动画、微信对话框、标签选择器、自定义导航栏、短信验证输入框等源码...
iOS精选源码简单的个人中心页面-自定义导航栏并予以渐变动画程序员取悦女票的正确姿势---Tip1(iOS美容篇) iOS 前台重启应用和清除角标的问题微信原生提醒对话框3.0 JHLikeBu ...

uni-app 自定义导航栏

效果图

隐藏小程序底部导航栏

封装组件

页面引入组件

uni-app 自定义导航栏相关推荐

最新文章

热门文章