mpvue中引入iview weapp标签使用方法(一)

**在组件的main.json文件中引入标签，最为重要

（一）列表 ------（i-cell-group/i-cell）

<i-cell-group>
	<i-cell title="登录注册" is-link i-class="red"></i-cell>
	<i-cell title="跳转到我的页面" is-link url="/pages/mine/main" link-type="switchTab"></i-cell>
	<i-cell title="只有footer点击有效" is-link url="/pages/mine/main" only-tap-footer></i-cell>
	<i-cell title="开关" >
		<switch slot="footer" checked></switch>
	</i-cell>
</i-cell-group>

（二）卡片 ------（i-card）

<i-card title="卡片标题" extra="额外内容" thumb="/static/images/user.png">
  		 <view slot="content" >内容不错</view>
   		<view slot="footer">局部内容</view>
</i-card>

效果图

（三）标签栏-------（i-tabbar）

<i-tab-bar  :current="current"    color="red"     @change="handleClick($event)">
    	<i-tab-bar-item key="homepage" icon="homepage" current-icon="homepage_fill" title="首页"></i-tab-bar-item>
    	<i-tab-bar-item key="collection" icon="collection" current-icon="collection_fill" title="收藏"></i-tab-bar-item>
    	<i-tab-bar-item key="emoji" icon="emoji" current-icon="emoji_fill" title="微笑"></i-tab-bar-item>
    	<i-tab-bar-item key="praise" icon="praise" current-icon="praise_fill" title="点赞"></i-tab-bar-item>
</i-tab-bar>
---------------------------------------------------------
data(){
    return{
        current:'homepage'    
    }
}
---------------------------------------------------------
methods:{
    handleClick(event){
        this.current=event.target.key;
    },
}

代码图



效果图

（四）标签 -------（tabs）

<i-tabs  :current="current"  @change="handleClick($event)"  color="red">
    	<i-tab key="tab1" title="选项1" count="11"></i-tab>
    	<i-tab key="tab2" title="选项2"></i-tab>
    	<i-tab key="tab3" title="选项3"></i-tab>
    	<i-tab key="tab4" title="选项4"></i-tab>
</i-tabs>
------------------------------------------------
data(){
    return{
        current:'homepage'    
    }
}
----------------------------------------------
methods:{
    handleClick(event){
        this.current=event.target.key;
    },
}

代码图


效果图