微信小程序tab組件封裝
最近在做微信小程序的項目冕臭，下面就微信小程序中tab的tab功能封裝成一個組件晋被，在項目項需要使用的地方可以隨時調(diào)取，如果你有vue的基礎(chǔ)可以快速的理解和上手翎卓，廢話不多說泪掀，直接上代碼
下面是html部分
<!--這是tab.wxml-->
<view class="contain">
<view class="tab" style="position:fixed;left:0;top:{{positionTop}}">
<view wx:for="{{tabTitle}}" wx:key="{{index}}" class="tab-son {{num==index?'active':''}}" bindtip='toggle' data-index={{index}}>{{item}}</view>
</view>
<view class="tab-content" style="padding-top:{{paddingTop}}">
<view wx:for="{{tabTitle}}" wx:key="{{index}}" class="tab-contents {{num==index?'on':''}}">
<slot name="{{index}}"></slot>
</view>
</view>
</view>
下面是css部分
/*這是tab.wxss部分,樣式可以根據(jù)自己的需求自己改變*/
.contain{
}
.active{
color:#0770EB;
height:74rpx;
border-bottom:3px solid #0770EB;
}
.tab{
width:100%;
display:flex;
align-item:flex-end;
justify-content:space-around;
background-color:#fff;
height:80rpx;
font-size:26rpx;
z-index:999;
text-align:center;
line-height:80rpx;
box-shadow:4px 4px 10px #f2f2f2;
}
.tab-content{
overflow:scroll;
}
.tab-contents{
display:none;
}
.on{
display:block;
}
下面是js部分
//這是tab.js部分
Component({
//下面是組件的屬性列表
options:{
multipleSlots:true //在組件定義時的選項中啟用多slot支持
},
properties:{
tabTitle:{
type:Object,
value:[]
},
positionTop:{
type:String,
value:"0"
}
paddingTop:{
type:String,
value:"80rpx"
}
},
//組件的初始數(shù)據(jù)
data:{
num:0
},
//組件的方法列表
methods:{
toggle:function(e){
if(this.data.num===e.currentTarget.dataset.index){
return false;
}else{
this.setData({
num:e.currentTarget.dataset.index;
})
}
}
}
})
下面是tab.json部分
{
"component":true,
"usingComponents":{
}
}
下面就是高潮部分了，同志們要扶好把手
如果需要在index.wxml的頁面中使用tab組件垃环，需要在index文件夾中的index.json里面引入邀层，如下：
{
"usingComponent":{
"tabView":"../components/tab/tab" //這是組件所在的路徑，前面是自定義的tab的元素名
}
}
在index.wxml中使用自定義的tabView的元素名
<tabView tabTitle="{{tabTitle}}" positionTop="自定義大小遂庄，也可以不寫寥院，根據(jù)自己實際情況" paddingTop="自定義大小，也可以不寫涛目，根據(jù)自己實際情況">
<view slot="0">
自己的頁面
</view>
<view slot="1">
自己的頁面
</view>
<view slot="2">
自己的頁面
</view>
</tabView>
下面是index.js
Page({
data:{
tabTitle:['tab1','tab2','tab3'] //這個可以寫成死的數(shù)據(jù)秸谢，也可以接收后臺返回的凛澎，寫成動態(tài)的
}
})
這就是微信小程序完整的tab組件的封裝與使用方法，如果有不對的地方歡迎指正估蹄，哪位大神有更好的方法塑煎，可以留言，如果有不對的地方也歡迎指正臭蚁。
