feat(CombinedTabs): 新增 l-content-class 外部样式类

l-content-class 覆盖内容区域样式

close #283

Author: juzi214032

dist/combined-tabs/index.js

@@ -4,7 +4,7 @@
     <view class="l-tabs l-sub-placement-left l-tabs-vertical {{aminmated ? 'l-aminmated' :''}} {{scrollable ? 'l-tabs-scroll':''}}">
         <template is="tab-header" wx:if="{{tabList[currentIndex].subTabs.length}}" data="{{tab:tabList[currentIndex].subTabs,placemanet,scrollable,transformY,transformX,activeKey:tabList[currentIndex].activeSubKey,hasLine,activeColor,inactiveColor,headerType:'subTab'}}"></template>
         <view class="l-tabs-main">
-            <view wx:if="{{!swipeable}}" class="l-tabpanel-content">
+            <view wx:if="{{!swipeable}}" class="l-tabpanel-content l-content-class">
                 <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);':''}}">
                     <view class="l-subpanel-content" wx:if="{{item.subTabs.length>0}}" style="{{'transform:translate(0,'+ -100 * item.subCurrentIndex +'%) translateZ(0px);'}}">
                         <view class="l-subpanel" wx:for="{{item.subTabs}}" wx:for-item="tab" wx:key="key">
@@ -14,17 +14,17 @@
                     <slot name="{{item.key}}" wx:else></slot>
                 </view>
             </view>
-            <swiper wx:else class="l-tabpanel-content" bindchange="swiperChange" current="{{currentIndex}}">
+            <swiper wx:else class="l-tabpanel-content l-content-class" bindchange="swiperChange" current="{{currentIndex}}">
                 <swiper-item class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':''}}" wx:for="{{tabList}}" wx:key="key">
                     <view wx:if="{{item.subTabs.length>0}}">
                         <swiper class="" vertical bindchange="subSwiperChange" current="{{item.subCurrentIndex}}">
                             <swiper-item wx:for="{{item.subTabs}}" wx:for-item="tab" wx:key="key">
                                 <slot name="{{tab.key}}"></slot>
                             </swiper-item>
                         </swiper>
-                      
-                    </view>   
-                      <slot name="{{item.key}}" wx:else></slot>    
+
+                    </view>
+                      <slot name="{{item.key}}" wx:else></slot>
                 </swiper-item>
             </swiper>
         </view>
@@ -41,4 +41,4 @@
             </view>
         </view>
     </scroll-view>
-</template>
+</template>

dist/combined-tabs/index.wxml

@@ -1,7 +1,7 @@
 // components/tabs/index.js
 Component({
   externalClasses: ['l-class-header', 'l-class-active', 'l-class-inactive', 'l-class-line', 'l-class-tabimage',
-    'l-header-class', 'l-active-class', 'l-inactive-class', 'l-line-class', 'l-tabimage-class'
+    'l-header-class', 'l-active-class', 'l-inactive-class', 'l-line-class', 'l-tabimage-class','l-content-class'
   ],
   relations: {
     '../tabpanel/index': {

examples/dist/combined-tabs/index.js

@@ -4,7 +4,7 @@
     <view class="l-tabs l-sub-placement-left l-tabs-vertical {{aminmated ? 'l-aminmated' :''}}  {{scrollable ? 'l-tabs-scroll':''}}">
         <template is="tab-header" wx:if="{{tabList[currentIndex].subTabs.length}}" data="{{tab:tabList[currentIndex].subTabs,placemanet,scrollable,transformY,transformX,activeKey:tabList[currentIndex].activeSubKey,hasLine,activeColor,inactiveColor,headerType:'subTab'}}"></template>
         <view class="l-tabs-main">
-            <view wx:if="{{!swipeable}}" class="l-tabpanel-content">
+            <view wx:if="{{!swipeable}}" class="l-tabpanel-content l-content-class">
                 <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);':''}}">
                     <view class="l-subpanel-content" wx:if="{{item.subTabs.length>0}}" style="{{'transform:translate(0,'+ -100 * item.subCurrentIndex +'%) translateZ(0px);'}}">
                         <view class="l-subpanel" wx:for="{{item.subTabs}}" wx:for-item="tab" wx:key="key">
@@ -14,17 +14,17 @@
                     <slot name="{{item.key}}" wx:else></slot>
                 </view>
             </view>
-            <swiper wx:else class="l-tabpanel-content" bindchange="swiperChange" current="{{currentIndex}}">
+            <swiper wx:else class="l-tabpanel-content l-content-class" bindchange="swiperChange" current="{{currentIndex}}">
                 <swiper-item class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':''}}" wx:for="{{tabList}}" wx:key="key">
                     <view wx:if="{{item.subTabs.length>0}}">
                         <swiper class="" vertical bindchange="subSwiperChange" current="{{item.subCurrentIndex}}" >
                             <swiper-item wx:for="{{item.subTabs}}" wx:for-item="tab" wx:key="key">
                                 <slot name="{{tab.key}}"></slot>
                             </swiper-item>
                         </swiper>
-                      
-                    </view>   
-                      <slot name="{{item.key}}" wx:else></slot>    
+
+                    </view>
+                      <slot name="{{item.key}}" wx:else></slot>
                 </swiper-item>
             </swiper>
         </view>
@@ -41,4 +41,4 @@
             </view>
         </view>
     </scroll-view>
-</template>
+</template>

examples/dist/combined-tabs/index.wxml

@@ -1,7 +1,7 @@
 // components/tabs/index.js
 Component({
   externalClasses: ['l-class-header', 'l-class-active', 'l-class-inactive', 'l-class-line', 'l-class-tabimage',
-    'l-header-class', 'l-active-class', 'l-inactive-class', 'l-line-class', 'l-tabimage-class'
+    'l-header-class', 'l-active-class', 'l-inactive-class', 'l-line-class', 'l-tabimage-class','l-content-class'
   ],
   relations: {
     '../tabpanel/index': {

src/combined-tabs/index.js

@@ -4,7 +4,7 @@
     <view class="l-tabs l-sub-placement-left l-tabs-vertical {{aminmated ? 'l-aminmated' :''}}  {{scrollable ? 'l-tabs-scroll':''}}">
         <template is="tab-header" wx:if="{{tabList[currentIndex].subTabs.length}}" data="{{tab:tabList[currentIndex].subTabs,placemanet,scrollable,transformY,transformX,activeKey:tabList[currentIndex].activeSubKey,hasLine,activeColor,inactiveColor,headerType:'subTab'}}"></template>
         <view class="l-tabs-main">
-            <view wx:if="{{!swipeable}}" class="l-tabpanel-content">
+            <view wx:if="{{!swipeable}}" class="l-tabpanel-content l-content-class">
                 <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);':''}}">
                     <view class="l-subpanel-content" wx:if="{{item.subTabs.length>0}}" style="{{'transform:translate(0,'+ -100 * item.subCurrentIndex +'%) translateZ(0px);'}}">
                         <view class="l-subpanel" wx:for="{{item.subTabs}}" wx:for-item="tab" wx:key="key">
@@ -14,17 +14,17 @@
                     <slot name="{{item.key}}" wx:else></slot>
                 </view>
             </view>
-            <swiper wx:else class="l-tabpanel-content" bindchange="swiperChange" current="{{currentIndex}}">
+            <swiper wx:else class="l-tabpanel-content l-content-class" bindchange="swiperChange" current="{{currentIndex}}">
                 <swiper-item class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':''}}" wx:for="{{tabList}}" wx:key="key">
                     <view wx:if="{{item.subTabs.length>0}}">
                         <swiper class="" vertical bindchange="subSwiperChange" current="{{item.subCurrentIndex}}" >
                             <swiper-item wx:for="{{item.subTabs}}" wx:for-item="tab" wx:key="key">
                                 <slot name="{{tab.key}}"></slot>
                             </swiper-item>
                         </swiper>
-                      
-                    </view>   
-                      <slot name="{{item.key}}" wx:else></slot>    
+
+                    </view>
+                      <slot name="{{item.key}}" wx:else></slot>
                 </swiper-item>
             </swiper>
         </view>
@@ -41,4 +41,4 @@
             </view>
         </view>
     </scroll-view>
-</template>
+</template>