ionic 底部tab模块切换,使用背景图片

应用场景:

设计在底部分了不同的模块,因此模块的图标显示不一样,由于使用的是ion-tabs ion-tab 和  ion-nav-view指令,没有预留写html代码位置或者图片的属性,因此不知道怎么显示图片,例如:

<ion-tabs>
	<ion-tab title="首页" icon="bar-home" href="#/tab/home" class="active" ng-click="changeTab($event)">
		<ion-nav-view name="home-tab"></ion-nav-view>
	</ion-tab>
</ion-tabs>

备注:<ion-nav-view name="home-tab"></ion-nav-view>中的name作为模块的区分,即不同的模块,显示在不同的ion-nav-view控件中


解决办法
由于ion-tab指令,会给特殊“字体”(即图标)准备一个固定的位置,因此,只需要将特殊字体不显示,然后将其背景设置为设计的图片即可


例子:

<ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}">
	<ion-tab title="首页" icon="bar-home" href="#/tab/home" class="active" ng-click="changeTab($event)">
		<ion-nav-view name="home-tab"></ion-nav-view>
	</ion-tab>
	<ion-tab title="实体店" icon="bar-wei" ui-sref="tab.wei"  ng-click="changeTab($event)">
		<ion-nav-view name="wei-tab"></ion-nav-view>
	</ion-tab>
	<ion-tab title="真的" icon="bar-brand" ui-sref="tab.brand"  ng-click="changeTab($event)">
		<ion-nav-view name="brand-tab" hide-nav-bar="true"></ion-nav-view>
	</ion-tab>
	<ion-tab title="购物车" badge="totalNum==undefind?0:totalNum" class="badge-assertive" icon="bar-shoppingcart" ui-sref="tab.shoppingcart" ng-click="changeTab($event)">
		<ion-nav-view name="shoppingcart-tab" hide-nav-bar="true"></ion-nav-view>
	</ion-tab>
	<ion-tab title="我的" icon="bar-my" ui-sref="tab.my" ng-click="changeTab($event)">
		<ion-nav-view name="my-tab" hide-nav-bar="true"></ion-nav-view>
	</ion-tab>
</ion-tabs>

<style>
	.color_31ac6d{
		color:#31ac6d;
	}
	.bar-home {
		background:url(img/tabbutton_home.png) no-repeat center;
		background-position: top;
		background-size: contain;
	}
	.active.bar-home {
		background:url(img/tabbutton_home_active.png) no-repeat center;
		background-position: top;
		background-size: contain;
	}

	.bar-wei {
		background:url(img/tabbutton_shop.png) no-repeat center;
		background-position: top;
		background-size: contain;
	}
	.active.bar-wei {
		background:url(img/tabbutton_shop_active.png) no-repeat center;
		background-position: top;
		background-size: contain;
	}

	.bar-brand {
		 background:url(img/tabbutton_real.png) no-repeat center;
		 background-position: top;
		 background-size: contain;
	 }

	.bar-shoppingcart {
		background:url(img/tabbutton_cart.png) no-repeat center;
		background-position: top;
		background-size: contain;
	}

	.bar-my {
		background:url(img/tabbutton_my.png) no-repeat center;
		background-position: top;
		background-size: contain;
	}

	.active.bar-brand {
		background:url(img/tabbutton_real_active.png) no-repeat center;
		background-position: top;
		background-size: contain;
	}

	.active.bar-shoppingcart {
		background:url(img/tabbutton_cart_active.png) no-repeat center;
		background-position: top;
		background-size: contain;
	}

	.active.bar-my {
		background:url(img/tabbutton_my_active.png) no-repeat center;
		background-position: top;
		background-size: contain;
	}
</style>

由于ion-tab指令会编译成HTML,仔细查看生成的HTML代码(tab效果 和 链接的关系),就能知道如何写页面跳转的逻辑了


//tab不同模块的切换
$scope.changeTab = function(myevent){
	var aObj = $(myevent.target).closest("a");
	var tabsObj = $(myevent.target).closest(".tabs");
	//删除选中样式,字体颜色样式
	tabsObj.find(".icon").removeClass("active");
	tabsObj.find(".tab-title").removeClass("color_31ac6d");
	//添加选中样式,字体颜色样式
	aObj.find(".icon").addClass("active");
	aObj.find(".tab-title").addClass("color_31ac6d");

	//完成页面跳转
	var iconAttr = aObj.attr("icon");
	var targetHref = $("ion-tab[icon='"+iconAttr+"']").attr("href");
	window.location.href = targetHref;
};



阅读更多
个人分类: angular & ionic
上一篇android webview控件学习
下一篇总结常用的SEO 办法
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭