uni-app自定义中间图标突起的tabbar

uni-app框架原生的tabbar配置并不支持中间图标凸起的样式设置,所以在查阅资料后选择自定义。

其中主要思想还是在框架的原生tabbar基础上做些改动,对个别页面使用  canvas  将图标从tabbar 的设置中剥离出来单独进行加载渲染。

首先在pages.json文件中进行tabbar的样式和列表配置,代码如下:

"tabBar":{
		//底部导航栏配置
		"color":"#BFBFBF",
		"selectedColor":"#515151",
		"borderStyle":"black",
		"backgroundColor":"#FFFFFF",
		//tabBar项目列表
		"list": [
			{
				"pagePath":"pages/tabBar/home",
				"text":"首页",
				"iconPath":"static/icons/home.png",
				"selectedIconPath":"static/icons/selectedHome.png"
			},
			{
				"pagePath":"pages/tabBar/sort",
				"text":"分类",
				"iconPath":"static/icons/sort.png",
				"selectedIconPath":"static/icons/selectedSort.png"
			},
			{
				"pagePath":"pages/tabBar/lu",
				"text":"撸一撸",
				"iconPath":"static/icons/luBackP.png",		
                //两张图片是该图标的背景图,图标真正渲染在首页完成
				"selectedIconPath":"static/icons/luBackP.png"
			},
			{
				"pagePath":"pages/tabBar/cart",
				"text":"购物车",
				"iconPath":"static/icons/cart.png",
				"selectedIconPath":"static/icons/selectedCart.png"
			},
			{
				"pagePath":"pages/tabBar/user",
				"text":"我的",
				"iconPath":"static/icons/user.png",
				"selectedIconPath":"static/icons/selectedUser.png"
			}
			
		]
	}

在配置文件中配置完毕后,在主页上对tabbar上需要单独渲染的图标进行设置,代码如下:

<script>
	var bitmap = null;
	export default {
		data() {
			return {

			};
		},
		onShow() {	//显示突起图标
			var icon = plus.nativeObj.View.getViewById("icon");	//根据图标id取到图片
			if(icon){
				setTimeout( function(){
					icon.show();
				} , 100)
			}
		},
		onLoad() {		//加载图片
			bitmap = new plus.nativeObj.Bitmap('bmp1');		//新增原生图片
			bitmap.loadBase64Data(
				'data:img/png; base64, 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',function() {},function(e) {}
			);
			this.createtab();
		},
		methods: {
			createtab: function(){
				//设置水平居中位置
				var leftPos = Math.ceil((plus.screen.resolutionWidth - 60) / 2);
				var view = new plus.nativeObj.View('icon', {
					bottom : '19px',
					left : leftPos + 'px',
					width : '60px',
					height : '60px'
				});
				view.drawBitmap(bitmap , {	//使用canvas画布把图标画到tabbar对应位置上
					tag : 'font',
					id : 'icon',
					src : 'static/icons/selectedLu.png',
					position: {
						top : '0px',
						left : '5px',
						width : '50px',
						height : '100%'
					}
				});
				view.addEventListener("click" , function(e){	//添加事件监听,点击触发
					uni.switchTab({			//连接到页面lu
						url : '/pages/tabBar/lu'
					})
				} , false);
				view.show();
			}
		}
	}
</script>

 

完成的自定义tabbar展示效果如下:

  • 10
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值