fix:混合标签页组件设置scrollable时无高度问题 (#643)

Author: 二一

dist/combined-tabs/index.wxml

@@ -4,10 +4,10 @@
     <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" style="{{'margin-left:'+ -100 *currentIndex +'%;'}}">
+            <view wx:if="{{!swipeable}}" class="l-tabpanel-content">
                 <view class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':'l-tabpanel-inactive'}}" wx:for="{{tabList}}" wx:key="{{item.key}}" style="{{placement=='left'||placement=='right' ? 'position:absolute;width:100%;height:100%;transform:translate(0,'+ 100 * index +'%) translateZ(0px);':''}}">
-                    <view class="l-tabpanel-content" wx:if="{{item.subTabs.length>0}}" style="{{'transform:translate(0,'+ -100 * item.subCurrentIndex +'%) translateZ(0px);'}}">
-                        <view class="l-tabpanel" wx:for="{{item.subTabs}}" wx:for-item="tab" wx:key="{{tab.key}}">
+                    <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="{{tab.key}}">
                             <slot name="{{tab.key}}"></slot>
                         </view>
                     </view>

dist/combined-tabs/index.wxss

@@ -1 +1 @@
-.l-tabs{display:flex;border-radius:8rpx;box-sizing:border-box;overflow:hidden;flex-direction:column;background:#fff;height:100%}.l-tabs .l-tabs-header{display:flex;width:100%;flex-direction:row;background:#fff;align-items:center}.l-tabs .l-tabs-header .l-tabs-item{flex:1;font-size:28rpx;text-align:center;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.l-tabs .l-tabs-header .l-icon-active,.l-tabs .l-tabs-header .l-tabs-active{color:#333;font-size:28rpx}.l-tabs .l-tabs-header .l-icon-inactive,.l-tabs .l-tabs-header .l-tabs-inactive{font-size:28rpx;color:#bbb}.l-tabs .l-tabs-header .l-tabsitems-row{flex-direction:row}.l-tabs .l-tabs-header .l-tabsitems-row .l-icon-active,.l-tabs .l-tabs-header .l-tabsitems-row .l-icon-inactive{margin-right:10rpx}.l-tabs .l-tabs-header .l-tabsitems-row-reverse{flex-direction:row-reverse}.l-tabs .l-tabs-header .l-tabsitems-row-reverse .l-icon-active,.l-tabs .l-tabs-header .l-tabsitems-row-reverse .l-icon-inactive{margin-left:10rpx}.l-placement-top .l-tabs-header{height:80rpx}.l-placement-top .l-tabs-header .l-tabs-item{min-height:100%}.l-sub-placement-left{flex-direction:row}.l-sub-placement-left .l-tabs-header{flex-direction:column;width:160rpx}.l-sub-placement-left .l-tabs-header>view{width:100%;height:80rpx;background:#f6f8fa}.l-sub-placement-left .l-tabs-header>.l-tabs-active{background:#fff}.l-tabpanel-content{display:flex}.l-sub-placement-left .l-tabs-main .l-tabpanel-content{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;position:relative;will-change:transform;transition:transform .3s cubic-bezier(.645,.045,.355,1)}.l-placement-top .l-tabpanel-content{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.l-aminmated.l-placement-top .l-tabpanel-content{will-change:margin-left;-webkit-transition:margin-left .3s cubic-bezier(.645,.045,.355,1);transition:margin-left .3s cubic-bezier(.645,.045,.355,1)}.l-tabpanel{width:100%;height:100%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:opacity .45s;transition:opacity .45s;opacity:1;text-overflow:ellipsis}.l-tabpanel-inactive{opacity:0;height:0;padding:0!important;pointer-events:none}.l-tabs-scroll.l-tabs-horizontal .l-tabs-header{-webkit-overflow-scrolling:touch;white-space:nowrap}.l-tabs-scroll.l-tabs-horizontal .l-tabs-header .l-tabs-item{overflow:visible;min-width:160rpx}.l-tabs-vertical .l-tabsscroll{width:160rpx}.l-tabs-vertical .l-tabs-header{height:100%;min-height:80rpx;-webkit-overflow-scrolling:touch;white-space:nowrap}.l-tabs-vertical .l-tabs-header .l-tabs-item{overflow:visible;min-height:80rpx}.l-tabs-item{position:relative}.l-tab-line{position:absolute;bottom:0;left:0;right:0;width:0;background:#000}.l-tabs-horizontal .l-tab-line{height:4rpx;margin:0 auto}.l-tabs-horizontal .l-tabs-active .l-tab-line{width:100%;transition-delay:.1s}.l-placement-top .l-tab-line{bottom:0}.l-placement-top .l-tabs-header-line{border-bottom:1px solid #f3f3f3}.l-tabs-vertical .l-tabs-active .l-tab-line{width:6rpx!important;height:40rpx!important;border-radius:0 6rpx 6rpx 0;top:0;left:0;margin:auto 0;transition-delay:.1s}.l-sub-placement-left .l-tab-line{left:0;right:auto}.l-sub-placement-left .l-tabs-header-line{border-right:1px solid #f3f3f3}.l-tab-image{width:100rpx;height:100rpx}.l-tab-image-placement-top{flex-direction:column}.l-tab-image-placement-left{flex-direction:row}.l-tabs-main{width:100%;height:100%;display:flex;flex-direction:row}.l-combined-tabs-main{display:flex}
+.l-tabs{display:flex;border-radius:8rpx;box-sizing:border-box;overflow:hidden;flex-direction:column;background:#fff;height:100%}.l-tabs .l-tabs-header{display:flex;width:100%;flex-direction:row;background:#fff;align-items:center}.l-tabs .l-tabs-header .l-tabs-item{flex:1;font-size:28rpx;text-align:center;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.l-tabs .l-tabs-header .l-icon-active,.l-tabs .l-tabs-header .l-tabs-active{color:#333;font-size:28rpx}.l-tabs .l-tabs-header .l-icon-inactive,.l-tabs .l-tabs-header .l-tabs-inactive{font-size:28rpx;color:#bbb}.l-tabs .l-tabs-header .l-tabsitems-row{flex-direction:row}.l-tabs .l-tabs-header .l-tabsitems-row .l-icon-active,.l-tabs .l-tabs-header .l-tabsitems-row .l-icon-inactive{margin-right:10rpx}.l-tabs .l-tabs-header .l-tabsitems-row-reverse{flex-direction:row-reverse}.l-tabs .l-tabs-header .l-tabsitems-row-reverse .l-icon-active,.l-tabs .l-tabs-header .l-tabsitems-row-reverse .l-icon-inactive{margin-left:10rpx}.l-placement-top .l-tabs-header{height:80rpx}.l-placement-top .l-tabs-header .l-tabs-item{min-height:100%}.l-sub-placement-left{flex-direction:row}.l-sub-placement-left .l-tabs-header{flex-direction:column;width:160rpx}.l-sub-placement-left .l-tabs-header>view{width:100%;height:80rpx;background:#f6f8fa}.l-sub-placement-left .l-tabs-header>.l-tabs-active{background:#fff}.l-sub-placement-left .l-tabs-main .l-tabpanel-content{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;position:relative;will-change:transform;transition:transform .3s cubic-bezier(.645,.045,.355,1)}.l-placement-top .l-tabpanel-content{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.l-subpanel-content{width:100%;height:100%}.l-tabpanel{width:100%;height:100%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:opacity .45s;transition:opacity .45s;opacity:1;text-overflow:ellipsis}.l-tabpanel-inactive{opacity:0;height:0;padding:0!important;pointer-events:none}.l-subpanel{height:100%}.l-tabs-scroll.l-tabs-horizontal .l-tabs-header{-webkit-overflow-scrolling:touch;white-space:nowrap}.l-tabs-scroll.l-tabs-horizontal .l-tabs-header .l-tabs-item{overflow:visible;min-width:160rpx}.l-tabs-scroll.l-tabs-horizontal .l-tabpanel-content{height:150px}.l-tabs-vertical .l-tabsscroll{width:160rpx}.l-tabs-vertical .l-tabs-header{height:100%;min-height:80rpx;-webkit-overflow-scrolling:touch;white-space:nowrap}.l-tabs-vertical .l-tabs-header .l-tabs-item{overflow:visible;min-height:80rpx}.l-tabs-item{position:relative}.l-tab-line{position:absolute;bottom:0;left:0;right:0;width:0;background:#000}.l-tabs-horizontal .l-tab-line{height:4rpx;margin:0 auto}.l-tabs-horizontal .l-tabs-active .l-tab-line{width:100%;transition-delay:.1s}.l-placement-top .l-tab-line{bottom:0}.l-placement-top .l-tabs-header-line{border-bottom:1px solid #f3f3f3}.l-tabs-vertical .l-tabs-active .l-tab-line{width:6rpx!important;height:40rpx!important;border-radius:0 6rpx 6rpx 0;top:0;left:0;margin:auto 0;transition-delay:.1s}.l-sub-placement-left .l-tab-line{left:0;right:auto}.l-sub-placement-left .l-tabs-header-line{border-right:1px solid #f3f3f3}.l-tab-image{width:100rpx;height:100rpx}.l-tab-image-placement-top{flex-direction:column}.l-tab-image-placement-left{flex-direction:row}.l-tabs-main{flex:1}.l-combined-tabs-main{display:flex}

dist/tabs/index.js

@@ -44,7 +44,6 @@ Component({
     activeKey: {
       type: String,
       value: '',
-      observer: 'changeCurrent'
     },
     placement: {
       type: String,
@@ -79,6 +78,19 @@ Component({
     transformX: 0,
     transformY: 0,
   },
+  observers: {
+    'activeKey': function (newKey) {
+      if(!newKey) return;
+      const index = this.data.tabList.findIndex(tab=>tab.key===newKey);
+      this.setData({
+        currentIndex:index
+      },() => {
+        if (this.data.scrollable) {
+          this.queryMultipleNodes();
+        }
+      });
+    }
+  },
 
   ready() {
     this.initTabs();

examples/dist/combined-tabs/index.wxml

@@ -4,10 +4,10 @@
     <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" style="{{'margin-left:'+ -100 *currentIndex +'%;'}}">
+            <view wx:if="{{!swipeable}}" class="l-tabpanel-content">
                 <view class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':'l-tabpanel-inactive'}}" wx:for="{{tabList}}" wx:key="{{item.key}}" style="{{placement=='left'||placement=='right' ? 'position:absolute;width:100%;height:100%;transform:translate(0,'+ 100 * index +'%) translateZ(0px);':''}}">
-                    <view class="l-tabpanel-content" wx:if="{{item.subTabs.length>0}}" style="{{'transform:translate(0,'+ -100 * item.subCurrentIndex +'%) translateZ(0px);'}}">
-                        <view class="l-tabpanel" wx:for="{{item.subTabs}}" wx:for-item="tab" wx:key="{{tab.key}}">
+                    <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="{{tab.key}}">
                             <slot name="{{tab.key}}"></slot>
                         </view>
                     </view>

examples/dist/combined-tabs/index.wxss

@@ -1 +1 @@
-.l-tabs{display:flex;border-radius:8rpx;box-sizing:border-box;overflow:hidden;flex-direction:column;background:#fff;height:100%}.l-tabs .l-tabs-header{display:flex;width:100%;flex-direction:row;background:#fff;align-items:center}.l-tabs .l-tabs-header .l-tabs-item{flex:1;font-size:28rpx;text-align:center;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.l-tabs .l-tabs-header .l-icon-active,.l-tabs .l-tabs-header .l-tabs-active{color:#333;font-size:28rpx}.l-tabs .l-tabs-header .l-icon-inactive,.l-tabs .l-tabs-header .l-tabs-inactive{font-size:28rpx;color:#bbb}.l-tabs .l-tabs-header .l-tabsitems-row{flex-direction:row}.l-tabs .l-tabs-header .l-tabsitems-row .l-icon-active,.l-tabs .l-tabs-header .l-tabsitems-row .l-icon-inactive{margin-right:10rpx}.l-tabs .l-tabs-header .l-tabsitems-row-reverse{flex-direction:row-reverse}.l-tabs .l-tabs-header .l-tabsitems-row-reverse .l-icon-active,.l-tabs .l-tabs-header .l-tabsitems-row-reverse .l-icon-inactive{margin-left:10rpx}.l-placement-top .l-tabs-header{height:80rpx}.l-placement-top .l-tabs-header .l-tabs-item{min-height:100%}.l-sub-placement-left{flex-direction:row}.l-sub-placement-left .l-tabs-header{flex-direction:column;width:160rpx}.l-sub-placement-left .l-tabs-header>view{width:100%;height:80rpx;background:#f6f8fa}.l-sub-placement-left .l-tabs-header>.l-tabs-active{background:#fff}.l-tabpanel-content{display:flex}.l-sub-placement-left .l-tabs-main .l-tabpanel-content{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;position:relative;will-change:transform;transition:transform .3s cubic-bezier(.645,.045,.355,1)}.l-placement-top .l-tabpanel-content{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.l-aminmated.l-placement-top .l-tabpanel-content{will-change:margin-left;-webkit-transition:margin-left .3s cubic-bezier(.645,.045,.355,1);transition:margin-left .3s cubic-bezier(.645,.045,.355,1)}.l-tabpanel{width:100%;height:100%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:opacity .45s;transition:opacity .45s;opacity:1;text-overflow:ellipsis}.l-tabpanel-inactive{opacity:0;height:0;padding:0!important;pointer-events:none}.l-tabs-scroll.l-tabs-horizontal .l-tabs-header{-webkit-overflow-scrolling:touch;white-space:nowrap}.l-tabs-scroll.l-tabs-horizontal .l-tabs-header .l-tabs-item{overflow:visible;min-width:160rpx}.l-tabs-vertical .l-tabsscroll{width:160rpx}.l-tabs-vertical .l-tabs-header{height:100%;min-height:80rpx;-webkit-overflow-scrolling:touch;white-space:nowrap}.l-tabs-vertical .l-tabs-header .l-tabs-item{overflow:visible;min-height:80rpx}.l-tabs-item{position:relative}.l-tab-line{position:absolute;bottom:0;left:0;right:0;width:0;background:#000}.l-tabs-horizontal .l-tab-line{height:4rpx;margin:0 auto}.l-tabs-horizontal .l-tabs-active .l-tab-line{width:100%;transition-delay:.1s}.l-placement-top .l-tab-line{bottom:0}.l-placement-top .l-tabs-header-line{border-bottom:1px solid #f3f3f3}.l-tabs-vertical .l-tabs-active .l-tab-line{width:6rpx!important;height:40rpx!important;border-radius:0 6rpx 6rpx 0;top:0;left:0;margin:auto 0;transition-delay:.1s}.l-sub-placement-left .l-tab-line{left:0;right:auto}.l-sub-placement-left .l-tabs-header-line{border-right:1px solid #f3f3f3}.l-tab-image{width:100rpx;height:100rpx}.l-tab-image-placement-top{flex-direction:column}.l-tab-image-placement-left{flex-direction:row}.l-tabs-main{width:100%;height:100%;display:flex;flex-direction:row}.l-combined-tabs-main{display:flex}
+.l-tabs{display:flex;border-radius:8rpx;box-sizing:border-box;overflow:hidden;flex-direction:column;background:#fff;height:100%}.l-tabs .l-tabs-header{display:flex;width:100%;flex-direction:row;background:#fff;align-items:center}.l-tabs .l-tabs-header .l-tabs-item{flex:1;font-size:28rpx;text-align:center;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.l-tabs .l-tabs-header .l-icon-active,.l-tabs .l-tabs-header .l-tabs-active{color:#333;font-size:28rpx}.l-tabs .l-tabs-header .l-icon-inactive,.l-tabs .l-tabs-header .l-tabs-inactive{font-size:28rpx;color:#bbb}.l-tabs .l-tabs-header .l-tabsitems-row{flex-direction:row}.l-tabs .l-tabs-header .l-tabsitems-row .l-icon-active,.l-tabs .l-tabs-header .l-tabsitems-row .l-icon-inactive{margin-right:10rpx}.l-tabs .l-tabs-header .l-tabsitems-row-reverse{flex-direction:row-reverse}.l-tabs .l-tabs-header .l-tabsitems-row-reverse .l-icon-active,.l-tabs .l-tabs-header .l-tabsitems-row-reverse .l-icon-inactive{margin-left:10rpx}.l-placement-top .l-tabs-header{height:80rpx}.l-placement-top .l-tabs-header .l-tabs-item{min-height:100%}.l-sub-placement-left{flex-direction:row}.l-sub-placement-left .l-tabs-header{flex-direction:column;width:160rpx}.l-sub-placement-left .l-tabs-header>view{width:100%;height:80rpx;background:#f6f8fa}.l-sub-placement-left .l-tabs-header>.l-tabs-active{background:#fff}.l-sub-placement-left .l-tabs-main .l-tabpanel-content{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;position:relative;will-change:transform;transition:transform .3s cubic-bezier(.645,.045,.355,1)}.l-placement-top .l-tabpanel-content{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.l-subpanel-content{width:100%;height:100%}.l-tabpanel{width:100%;height:100%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:opacity .45s;transition:opacity .45s;opacity:1;text-overflow:ellipsis}.l-tabpanel-inactive{opacity:0;height:0;padding:0!important;pointer-events:none}.l-subpanel{height:100%}.l-tabs-scroll.l-tabs-horizontal .l-tabs-header{-webkit-overflow-scrolling:touch;white-space:nowrap}.l-tabs-scroll.l-tabs-horizontal .l-tabs-header .l-tabs-item{overflow:visible;min-width:160rpx}.l-tabs-scroll.l-tabs-horizontal .l-tabpanel-content{height:150px}.l-tabs-vertical .l-tabsscroll{width:160rpx}.l-tabs-vertical .l-tabs-header{height:100%;min-height:80rpx;-webkit-overflow-scrolling:touch;white-space:nowrap}.l-tabs-vertical .l-tabs-header .l-tabs-item{overflow:visible;min-height:80rpx}.l-tabs-item{position:relative}.l-tab-line{position:absolute;bottom:0;left:0;right:0;width:0;background:#000}.l-tabs-horizontal .l-tab-line{height:4rpx;margin:0 auto}.l-tabs-horizontal .l-tabs-active .l-tab-line{width:100%;transition-delay:.1s}.l-placement-top .l-tab-line{bottom:0}.l-placement-top .l-tabs-header-line{border-bottom:1px solid #f3f3f3}.l-tabs-vertical .l-tabs-active .l-tab-line{width:6rpx!important;height:40rpx!important;border-radius:0 6rpx 6rpx 0;top:0;left:0;margin:auto 0;transition-delay:.1s}.l-sub-placement-left .l-tab-line{left:0;right:auto}.l-sub-placement-left .l-tabs-header-line{border-right:1px solid #f3f3f3}.l-tab-image{width:100rpx;height:100rpx}.l-tab-image-placement-top{flex-direction:column}.l-tab-image-placement-left{flex-direction:row}.l-tabs-main{flex:1}.l-combined-tabs-main{display:flex}

examples/dist/tabs/index.js

@@ -44,7 +44,6 @@ Component({
     activeKey: {
       type: String,
       value: '',
-      observer: 'changeCurrent'
     },
     placement: {
       type: String,
@@ -79,6 +78,19 @@ Component({
     transformX: 0,
     transformY: 0,
   },
+  observers: {
+    'activeKey': function (newKey) {
+      if(!newKey) return;
+      const index = this.data.tabList.findIndex(tab=>tab.key===newKey);
+      this.setData({
+        currentIndex:index
+      },() => {
+        if (this.data.scrollable) {
+          this.queryMultipleNodes();
+        }
+      });
+    }
+  },
 
   ready() {
     this.initTabs();

examples/pages/components/nav/pages/combined-tabs/index.wxml

@@ -3,7 +3,7 @@
 <view class='container'>
   <content-title name="CombinedTabs" describe="组合标签">
     <content-card l-content="content" name="基本使用">
-      <l-combined-tabs bind:linchange="changeTabs" aminmated>
+      <l-combined-tabs bind:linchange="changeTabs" swipeable="{{false}}">
         <l-tabpanel wx:for="{{dubbleTabs}}" tab="{{item.tab}}" key="{{item.key}}" sub-key="{{item.subKey}}" sub-tab="{{item.subTab}}" slot="{{item.subKey||item.key}}" wx:key="{{item.subTab||item.key}}">
           <view class="tab-content">{{item.subTab||item.tab}}</view>
         </l-tabpanel>

examples/pages/components/nav/pages/combined-tabs/index.wxss

@@ -7,7 +7,6 @@
 
 .tab-content {
   min-height: 140rpx;
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;