联系客服
15985840591

VUE之mint-ui的tabbar使用

分享 未结 0 0
白茶大师
白茶大师 VIP3 2018年06月08日

我们通过tabbar和tabcontainer来达到我们想要的页面滑动切换效果。

通过改变tabItemActive的值就可以切换页面。


<template>
	<div class="page">
		<mt-header title="微站云"></mt-header>
		<mt-tab-container v-model="tabItemActive" swipeable>
		  <mt-tab-container-item id="pageIndex">
			<mt-cell v-for="n in 10" title="tab-container 1"></mt-cell>
		  </mt-tab-container-item>
		  <mt-tab-container-item id="pageProduct">
			<mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
		  </mt-tab-container-item>
		  <mt-tab-container-item id="pageArticle">
			<mt-cell v-for="n in 7" title="tab-container 3"></mt-cell>
		  </mt-tab-container-item>
			<mt-tab-container-item id="pageUser">
			<mt-cell v-for="n in 7" title="tab-container 3"></mt-cell>
		  </mt-tab-container-item>
		</mt-tab-container>
		 
			
			
		<mt-tabbar v-model="tabItemActive"  fixed>
		  <mt-tab-item id="pageIndex">
			<img slot="icon" src="../assets/logo.png">
			首页
		  </mt-tab-item>
		  <mt-tab-item id="pageProduct">
			<img slot="icon" src="../assets/logo.png">
			产品
		  </mt-tab-item>
		  <mt-tab-item id="pageArticle">
			<img slot="icon" src="../assets/logo.png">
			文章
		  </mt-tab-item>
		  <mt-tab-item id="pageUser">
			<img slot="icon" src="../assets/logo.png">
			我的
		  </mt-tab-item>
		</mt-tabbar>
		 
		
	</div>
	
</template>

<script>
	 

	export default{
		 
		data(){
			return {
				"tabItemActive":"pageIndex"
				
			}
		}
		
	}
</script>

<style scoped="">
.mint-swipe{
	height: 200px;
}
.swipe-img{
	height: 200px;
}
.mint-tab-container-item{
	height: 200px;
}
</style>
回帖
  • 消灭零回复
 

回贴周榜

本周热议
没有相关数据
layui

微信扫码关注 得推网 公众号