V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaoyan2017
V2EX  ›  推广

uni-app 自定义 tabbar 实例分析

  •  
  •   xiaoyan2017 · 2019-09-24 10:23:59 +08:00 · 7265 次点击
    这是一个创建于 1874 天前的主题,其中的信息可能已经有所发展或是发生改变。

    上次分享了个uni-app 实现自定义导航栏 headerBar效果,今天分享下使用 uni-app 自定义 tabbar 实现方式。

    uni-app 自定义动态底部导航 tabbar|仿微信 tabbar 导航栏,支持当前第几个选中、自定义背景、图片 /图标、字体颜色

    如下图:分别在 H5 端、小程序、APP 端实现的自定义 tabbar 效果 uni-app 原生导航 tabBar 功能也挺好,不过有时为了满足多样化的项目需求,如:背景色渐变、字体图标,一些特殊图标凸显效果,这时候就只能自定义 tabbar 来实现功能了。

    新建 tabbar.vue 组件

    <block v-for="(item,index) in tabList" :key="index">
    	<view class="navigator" :class="currentTabIndex == index ? 'on' : ''" @tap="switchTab(index)">
    		<view class="icon">
    			<text class="iconfont" :class="item.icon" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]"></text>
    			<text v-if="item.badge" class="uni_badge">{{item.badge}}</text>
    			<text v-if="item.badgeDot" class="uni_badge uni_badge_dot"></text>
    			</view>
    		<view class="text" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]">{{item.text}}</view>
    	</view>
    </block>
    

    uni-app 自定义 tabbar 选项配置

    <script>
    	export default {
    		data() {
    			return {
    				tabList: [
    					{
    						icon: 'icon-emotion',
    						text: 'tab01',
    						badge: 1
    					},
    					{
    						icon: 'icon-qianbao',
    						text: 'tab02',
    					},
    					{
    						icon: 'icon-choose01',
    						text: 'tab03',
    						badgeDot: true
    					}
    				],
    				currentTabIndex: this.current
    			}
    		},
    		props: {
    			current: { type: [Number, String], default: 0 },
    			backgroundColor: { type: String, default: '#fbfbfb' },
    			color: { type: String, default: '#999' },
    			tintColor: { type: String, default: '#42b983' }
    		},
    		methods: {
    			switchTab(index){
    				this.currentTabIndex = index
    				this.$emit('click', index)
    			}
    		},
    	}
    </script>
    

    在 main.js 里面引入全局组件

    import tabBar from './components/tabbar.vue'
    Vue.component('tab-bar', tabBar)
    

    此时的 tab-bar 已经是全局组件了,只需在需要的视图页面引用即可

    <tab-bar :current="currentTabIndex" backgroundColor="#fbfbfb" color="#999" tintColor="#42b983" @click="tabClick"></tab-bar>
    

    <tab-bar :current="2" backgroundColor="#1a4065" color="#c3daf1" tintColor="#02f32b" @click="tabClick"></tab-bar>
    

    作者:xiaoyan2015
    链接: https://juejin.im/post/5d88f588518825727d44cfad
    来源:掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    1 条回复    2019-09-24 11:05:50 +08:00
    Definezhang
        1
    Definezhang  
       2019-09-24 11:05:50 +08:00
    兄弟,头像撞了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2565 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 05:51 · PVG 13:51 · LAX 21:51 · JFK 00:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.