首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  程序员

uni-app 自定义 tabbar 实例分析

  •  
  •   xiaoyan2017 · 73 天前 · 1161 次点击
    这是一个创建于 73 天前的主题,其中的信息可能已经有所发展或是发生改变。

    上次分享了个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
        1
    Definezhang   73 天前
    兄弟,头像撞了
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   883 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 20ms · UTC 21:49 · PVG 05:49 · LAX 13:49 · JFK 16:49
    ♥ Do have faith in what you're doing.