Skip to content

Commit 0811013

Browse files
juzi214032juzi214032
committed
feat(Tabs): 新增标签栏 slot (#784)
新增 slot，用于自定义 Tabs 的标签栏，slot name 为 item.key.tab，在未填写 tab 属性时生效 示例： <l-tabs> <view slot="1.tab">标签一</view> <view slot="2.tab">标签一</view> <view slot="3.tab">标签一</view> <l-tabpanel key="1" slot="1"> <l-tabpanel key="2" slot="2"> <l-tabpanel key="3" slot="3"> </l-tabs> Closes 763
1 parent bb3caf5 commit 0811013

File tree

3 files changed

+110
-83
lines changed

3 files changed

+110
-83
lines changed

‎dist/tabs/index.wxml‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11

22
<view class="l-tabs l-class-tabs l-tabs-class {{'l-placement-'+placement}} {{animated ? 'l-aminmated' :''}} {{placement==='left'||placement==='right'?'l-tabs-vertical':'l-tabs-horizontal'}} {{scrollable ? 'l-tabs-scroll':''}}">
3-
<scroll-view scroll-x="{{placement==='top'||placement==='bottom' && scrollable}}" scroll-y="{{placement==='left'||placement==='right' && scrollable}}" scroll-top="{{transformY}}" scroll-left="{{transformX}}" scroll-with-animation class="l-tabsscroll l-class-header l-header-class {{hasLine?'l-tabs-header-line l-class-header-line l-header-line-class':''}}">
4-
<view class="l-tabs-header">
5-
<view class="l-tabs-item {{equalWidth?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.picPlacement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" wx:for="{{tabList}}" wx:key="key" data-key="{{item.key}}" data-index="{{index}}" bind:tap="handleChange">
6-
<image wx:if="{{ item.image.activeImage || item.image.defaultImage }}" src="{{item.key===activeKey? item.image.activeImage:item.image.defaultImage}}" class="l-tab-image l-class-tabimage l-tabimage-class"/>
7-
<l-icon wx:if="{{item.icon}}" l-class="l-class-icon l-icon-class" l-self-class="{{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}" name="{{item.icon}}" color="{{item.key===activeKey?activeColor:inactiveColor}}" size="{{item.iconSize}}"/>
8-
{{item.tab}}
9-
<view class="l-tab-line {{item.key===activeKey?'l-class-line l-line-class':''}} {{animatedForLine?'l-line-aminmated':''}}" wx:if="{{hasLine}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
10-
</view>
11-
</view>
12-
</scroll-view>
13-
<view wx:if="{{!swipeable}}" class="l-tabpanel-content l-class-content l-content-class" style="{{placement==='top'||placement==='bottom' ? 'margin-left:'+ -100 *currentIndex +'%;':'transform:translate(0,'+ -100 * currentIndex +'%) translateZ(0px);'}}">
14-
<view class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':'l-tabpanel-inactive'}}" wx:for="{{tabList}}" wx:key="key" style="{{placement==='left'||placement==='right' ? 'position:absolute;width:100%;height:100%;transform:translate(0,'+ 100 * index +'%) translateZ(0px);':''}}">
15-
<slot name="{{item.key}}"></slot>
16-
</view>
3+
<scroll-view scroll-x="{{placement==='top'||placement==='bottom' && scrollable}}" scroll-y="{{placement==='left'||placement==='right' && scrollable}}" scroll-top="{{transformY}}" scroll-left="{{transformX}}" scroll-with-animation class="l-tabsscroll l-class-header l-header-class {{hasLine?'l-tabs-header-line l-class-header-line l-header-line-class':''}}">
4+
<view class="l-tabs-header">
5+
<view class="l-tabs-item {{equalWidth?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.picPlacement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" wx:for="{{tabList}}" wx:key="key" data-key="{{item.key}}" data-index="{{index}}" bind:tap="handleChange">
6+
<image wx:if="{{ item.image.activeImage || item.image.defaultImage }}" src="{{item.key===activeKey? item.image.activeImage:item.image.defaultImage}}" class="l-tab-image l-class-tabimage l-tabimage-class"/>
7+
<l-icon wx:if="{{item.icon}}" l-class="l-class-icon l-icon-class" l-self-class="{{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}" name="{{item.icon}}" color="{{item.key===activeKey?activeColor:inactiveColor}}" size="{{item.iconSize}}"/>
8+
{{item.tab}}
9+
<slot wx:if="{{!item.tab}}" name="{{item.key+'.tab'}}"></slot>
10+
<view class="l-tab-line {{item.key===activeKey?'l-class-line l-line-class':''}} {{animatedForLine?'l-line-aminmated':''}}" wx:if="{{hasLine}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
11+
</view>
1712
</view>
18-
<swiper wx:else class="l-tabpanel-content l-tabpanel-swiper l-class-content l-content-class" bindchange="swiperChange" current="{{currentIndex}}" vertical="{{placement==='left'||placement==='right'}}">
19-
<swiper-item class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':''}}" wx:for="{{tabList}}" wx:key="key">
20-
<slot name="{{item.key}}"></slot>
21-
</swiper-item>
22-
</swiper>
13+
</scroll-view>
14+
<view wx:if="{{!swipeable}}" class="l-tabpanel-content l-class-content l-content-class" style="{{placement==='top'||placement==='bottom' ? 'margin-left:'+ -100 *currentIndex +'%;':'transform:translate(0,'+ -100 * currentIndex +'%) translateZ(0px);'}}">
15+
<view class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':'l-tabpanel-inactive'}}" wx:for="{{tabList}}" wx:key="key" style="{{placement==='left'||placement==='right' ? 'position:absolute;width:100%;height:100%;transform:translate(0,'+ 100 * index +'%) translateZ(0px);':''}}">
16+
<slot name="{{item.key}}"></slot>
17+
</view>
18+
</view>
19+
<swiper wx:else class="l-tabpanel-content l-tabpanel-swiper l-class-content l-content-class" bindchange="swiperChange" current="{{currentIndex}}" vertical="{{placement==='left'||placement==='right'}}">
20+
<swiper-item class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':''}}" wx:for="{{tabList}}" wx:key="key">
21+
<slot name="{{item.key}}"></slot>
22+
</swiper-item>
23+
</swiper>
2324
</view>

‎examples/dist/tabs/index.wxml‎

Lines changed: 45 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,48 @@
11
<!-- components/tabs/index.wxml -->
2-
<view class="l-tabs l-class-tabs l-tabs-class {{'l-placement-'+placement}} {{animated ? 'l-aminmated' :''}} {{placement==='left'||placement==='right'?'l-tabs-vertical':'l-tabs-horizontal'}} {{scrollable ? 'l-tabs-scroll':''}}">
3-
<scroll-view
4-
scroll-x="{{placement==='top'||placement==='bottom' && scrollable}}"
5-
scroll-y="{{placement==='left'||placement==='right' && scrollable}}"
6-
scroll-top="{{transformY}}"
7-
scroll-left="{{transformX}}"
8-
scroll-with-animation
9-
class="l-tabsscroll l-class-header l-header-class {{hasLine?'l-tabs-header-line l-class-header-line l-header-line-class':''}}">
10-
<view class="l-tabs-header">
11-
<view class="l-tabs-item {{equalWidth?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.picPlacement}}"
12-
style="color:{{item.key===activeKey?activeColor:inactiveColor}}"
13-
wx:for="{{tabList}}"
14-
wx:key="key"
15-
data-key="{{item.key}}"
16-
data-index="{{index}}"
17-
bind:tap="handleChange">
18-
<image wx:if="{{ item.image.activeImage || item.image.defaultImage }}" src="{{item.key===activeKey? item.image.activeImage:item.image.defaultImage}}" class="l-tab-image l-class-tabimage l-tabimage-class"/>
19-
<l-icon wx:if="{{item.icon}}" l-class="l-class-icon l-icon-class" l-self-class="{{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}" name="{{item.icon}}" color="{{item.key===activeKey?activeColor:inactiveColor}}" size="{{item.iconSize}}"/>
20-
{{item.tab}}
21-
<view class="l-tab-line {{item.key===activeKey?'l-class-line l-line-class':''}} {{animatedForLine?'l-line-aminmated':''}}" wx:if="{{hasLine}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
22-
</view>
23-
</view>
24-
</scroll-view>
25-
<view wx:if="{{!swipeable}}" class="l-tabpanel-content l-class-content l-content-class" style="{{placement==='top'||placement==='bottom' ? 'margin-left:'+ -100 *currentIndex +'%;':'transform:translate(0,'+ -100 * currentIndex +'%) translateZ(0px);'}}">
26-
<view class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':'l-tabpanel-inactive'}}" wx:for="{{tabList}}" wx:key="key" style="{{placement==='left'||placement==='right' ? 'position:absolute;width:100%;height:100%;transform:translate(0,'+ 100 * index +'%) translateZ(0px);':''}}">
27-
<slot name="{{item.key}}"></slot>
28-
</view>
2+
<view
3+
class="l-tabs l-class-tabs l-tabs-class {{'l-placement-'+placement}} {{animated ? 'l-aminmated' :''}} {{placement==='left'||placement==='right'?'l-tabs-vertical':'l-tabs-horizontal'}} {{scrollable ? 'l-tabs-scroll':''}}">
4+
<scroll-view
5+
scroll-x="{{placement==='top'||placement==='bottom' && scrollable}}"
6+
scroll-y="{{placement==='left'||placement==='right' && scrollable}}"
7+
scroll-top="{{transformY}}"
8+
scroll-left="{{transformX}}"
9+
scroll-with-animation
10+
class="l-tabsscroll l-class-header l-header-class {{hasLine?'l-tabs-header-line l-class-header-line l-header-line-class':''}}">
11+
<view class="l-tabs-header">
12+
<view
13+
class="l-tabs-item {{equalWidth?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.picPlacement}}"
14+
style="color:{{item.key===activeKey?activeColor:inactiveColor}}"
15+
wx:for="{{tabList}}"
16+
wx:key="key"
17+
data-key="{{item.key}}"
18+
data-index="{{index}}"
19+
bind:tap="handleChange">
20+
<image wx:if="{{ item.image.activeImage || item.image.defaultImage }}"
21+
src="{{item.key===activeKey? item.image.activeImage:item.image.defaultImage}}"
22+
class="l-tab-image l-class-tabimage l-tabimage-class"/>
23+
<l-icon wx:if="{{item.icon}}" l-class="l-class-icon l-icon-class"
24+
l-self-class="{{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}" name="{{item.icon}}"
25+
color="{{item.key===activeKey?activeColor:inactiveColor}}" size="{{item.iconSize}}"/>
26+
{{item.tab}}
27+
<slot wx:if="{{!item.tab}}" name="{{item.key+'.tab'}}"></slot>
28+
<view
29+
class="l-tab-line {{item.key===activeKey?'l-class-line l-line-class':''}} {{animatedForLine?'l-line-aminmated':''}}"
30+
wx:if="{{hasLine}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
31+
</view>
2932
</view>
30-
<swiper wx:else class="l-tabpanel-content l-tabpanel-swiper l-class-content l-content-class" bindchange="swiperChange" current="{{currentIndex}}" vertical="{{placement==='left'||placement==='right'}}">
31-
<swiper-item class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':''}}" wx:for="{{tabList}}" wx:key="key">
32-
<slot name="{{item.key}}"></slot>
33-
</swiper-item>
34-
</swiper>
33+
</scroll-view>
34+
<view wx:if="{{!swipeable}}" class="l-tabpanel-content l-class-content l-content-class"
35+
style="{{placement==='top'||placement==='bottom' ? 'margin-left:'+ -100 *currentIndex +'%;':'transform:translate(0,'+ -100 * currentIndex +'%) translateZ(0px);'}}">
36+
<view class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':'l-tabpanel-inactive'}}" wx:for="{{tabList}}"
37+
wx:key="key"
38+
style="{{placement==='left'||placement==='right' ? 'position:absolute;width:100%;height:100%;transform:translate(0,'+ 100 * index +'%) translateZ(0px);':''}}">
39+
<slot name="{{item.key}}"></slot>
40+
</view>
41+
</view>
42+
<swiper wx:else class="l-tabpanel-content l-tabpanel-swiper l-class-content l-content-class" bindchange="swiperChange"
43+
current="{{currentIndex}}" vertical="{{placement==='left'||placement==='right'}}">
44+
<swiper-item class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':''}}" wx:for="{{tabList}}" wx:key="key">
45+
<slot name="{{item.key}}"></slot>
46+
</swiper-item>
47+
</swiper>
3548
</view>

‎src/tabs/index.wxml‎

Lines changed: 45 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,48 @@
11
<!-- components/tabs/index.wxml -->
2-
<view class="l-tabs l-class-tabs l-tabs-class {{'l-placement-'+placement}} {{animated ? 'l-aminmated' :''}} {{placement==='left'||placement==='right'?'l-tabs-vertical':'l-tabs-horizontal'}} {{scrollable ? 'l-tabs-scroll':''}}">
3-
<scroll-view
4-
scroll-x="{{placement==='top'||placement==='bottom' && scrollable}}"
5-
scroll-y="{{placement==='left'||placement==='right' && scrollable}}"
6-
scroll-top="{{transformY}}"
7-
scroll-left="{{transformX}}"
8-
scroll-with-animation
9-
class="l-tabsscroll l-class-header l-header-class {{hasLine?'l-tabs-header-line l-class-header-line l-header-line-class':''}}">
10-
<view class="l-tabs-header">
11-
<view class="l-tabs-item {{equalWidth?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.picPlacement}}"
12-
style="color:{{item.key===activeKey?activeColor:inactiveColor}}"
13-
wx:for="{{tabList}}"
14-
wx:key="key"
15-
data-key="{{item.key}}"
16-
data-index="{{index}}"
17-
bind:tap="handleChange">
18-
<image wx:if="{{ item.image.activeImage || item.image.defaultImage }}" src="{{item.key===activeKey? item.image.activeImage:item.image.defaultImage}}" class="l-tab-image l-class-tabimage l-tabimage-class"/>
19-
<l-icon wx:if="{{item.icon}}" l-class="l-class-icon l-icon-class" l-self-class="{{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}" name="{{item.icon}}" color="{{item.key===activeKey?activeColor:inactiveColor}}" size="{{item.iconSize}}"/>
20-
{{item.tab}}
21-
<view class="l-tab-line {{item.key===activeKey?'l-class-line l-line-class':''}} {{animatedForLine?'l-line-aminmated':''}}" wx:if="{{hasLine}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
22-
</view>
23-
</view>
24-
</scroll-view>
25-
<view wx:if="{{!swipeable}}" class="l-tabpanel-content l-class-content l-content-class" style="{{placement==='top'||placement==='bottom' ? 'margin-left:'+ -100 *currentIndex +'%;':'transform:translate(0,'+ -100 * currentIndex +'%) translateZ(0px);'}}">
26-
<view class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':'l-tabpanel-inactive'}}" wx:for="{{tabList}}" wx:key="key" style="{{placement==='left'||placement==='right' ? 'position:absolute;width:100%;height:100%;transform:translate(0,'+ 100 * index +'%) translateZ(0px);':''}}">
27-
<slot name="{{item.key}}"></slot>
28-
</view>
2+
<view
3+
class="l-tabs l-class-tabs l-tabs-class {{'l-placement-'+placement}} {{animated ? 'l-aminmated' :''}} {{placement==='left'||placement==='right'?'l-tabs-vertical':'l-tabs-horizontal'}} {{scrollable ? 'l-tabs-scroll':''}}">
4+
<scroll-view
5+
scroll-x="{{placement==='top'||placement==='bottom' && scrollable}}"
6+
scroll-y="{{placement==='left'||placement==='right' && scrollable}}"
7+
scroll-top="{{transformY}}"
8+
scroll-left="{{transformX}}"
9+
scroll-with-animation
10+
class="l-tabsscroll l-class-header l-header-class {{hasLine?'l-tabs-header-line l-class-header-line l-header-line-class':''}}">
11+
<view class="l-tabs-header">
12+
<view
13+
class="l-tabs-item {{equalWidth?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.picPlacement}}"
14+
style="color:{{item.key===activeKey?activeColor:inactiveColor}}"
15+
wx:for="{{tabList}}"
16+
wx:key="key"
17+
data-key="{{item.key}}"
18+
data-index="{{index}}"
19+
bind:tap="handleChange">
20+
<image wx:if="{{ item.image.activeImage || item.image.defaultImage }}"
21+
src="{{item.key===activeKey? item.image.activeImage:item.image.defaultImage}}"
22+
class="l-tab-image l-class-tabimage l-tabimage-class"/>
23+
<l-icon wx:if="{{item.icon}}" l-class="l-class-icon l-icon-class"
24+
l-self-class="{{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}" name="{{item.icon}}"
25+
color="{{item.key===activeKey?activeColor:inactiveColor}}" size="{{item.iconSize}}"/>
26+
{{item.tab}}
27+
<slot wx:if="{{!item.tab}}" name="{{item.key+'.tab'}}"></slot>
28+
<view
29+
class="l-tab-line {{item.key===activeKey?'l-class-line l-line-class':''}} {{animatedForLine?'l-line-aminmated':''}}"
30+
wx:if="{{hasLine}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
31+
</view>
2932
</view>
30-
<swiper wx:else class="l-tabpanel-content l-tabpanel-swiper l-class-content l-content-class" bindchange="swiperChange" current="{{currentIndex}}" vertical="{{placement==='left'||placement==='right'}}">
31-
<swiper-item class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':''}}" wx:for="{{tabList}}" wx:key="key">
32-
<slot name="{{item.key}}"></slot>
33-
</swiper-item>
34-
</swiper>
33+
</scroll-view>
34+
<view wx:if="{{!swipeable}}" class="l-tabpanel-content l-class-content l-content-class"
35+
style="{{placement==='top'||placement==='bottom' ? 'margin-left:'+ -100 *currentIndex +'%;':'transform:translate(0,'+ -100 * currentIndex +'%) translateZ(0px);'}}">
36+
<view class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':'l-tabpanel-inactive'}}" wx:for="{{tabList}}"
37+
wx:key="key"
38+
style="{{placement==='left'||placement==='right' ? 'position:absolute;width:100%;height:100%;transform:translate(0,'+ 100 * index +'%) translateZ(0px);':''}}">
39+
<slot name="{{item.key}}"></slot>
40+
</view>
41+
</view>
42+
<swiper wx:else class="l-tabpanel-content l-tabpanel-swiper l-class-content l-content-class" bindchange="swiperChange"
43+
current="{{currentIndex}}" vertical="{{placement==='left'||placement==='right'}}">
44+
<swiper-item class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':''}}" wx:for="{{tabList}}" wx:key="key">
45+
<slot name="{{item.key}}"></slot>
46+
</swiper-item>
47+
</swiper>
3548
</view>

0 commit comments

Comments
 (0)