Merge pull request #725 from Tencent/feat/tabs/props-sticky

feat(tabs): support sticky

src/sticky/index.ts

@@ -0,0 +1,3 @@
+export * from './props';
+export * from './type';
+export * from './sticky';

src/sticky/sticky.ts

@@ -1,13 +1,15 @@
 import { SuperComponent, wxComponent } from '../common/src/index';
 import props from './props';
 import config from '../common/config';
-
+import type { TdStickyProps } from './type';
 import { pageScrollMixin, getRect } from './utils';
 
 const { prefix } = config;
 
 const ContainerClass = `.${prefix}-sticky`;
 
+export interface StickyProps extends TdStickyProps {}
+
 @wxComponent()
 export default class Sticky extends SuperComponent {
   externalClasses = [`${prefix}-class`];

src/tabs/README.md

@@ -20,6 +20,7 @@ isComponent: true
 
 CSS 变量名|说明
 --|--
+--td-tab-nav-bg-color | 选项卡背景颜色
 --td-tab-item-color | 选项卡字体颜色
 --td-tab-item-active-color | 选项卡激活时字体颜色
 --td-tab-item-disabled-color | 选项卡禁止状态时字体颜色
@@ -117,13 +118,15 @@ show-bottom-line | Boolean | true | 是否展示底部激活线条 | N
 swipeable | Boolean | true | 是否可以滑动切换 | N
 value | String / Number | - | 激活的选项卡值。TS 类型：`TabValue` `type TabValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
 default-value | String / Number | undefined | 激活的选项卡值。非受控属性。TS 类型：`TabValue` `type TabValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
+sticky | Boolean | false | 是否开启粘性布局 | N
+stickyProps | Object | - | 加载sticky属性，透传至Sticky组件。TS 类型：`StickyProps` | N
 
 ### Tabs Events
 
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: TabValue)` | 激活的选项卡发生变化时触发
-
+scroll | `(detail: { scrollTop: number, isFixed: boolean })` | 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶 |
 ### TabPanel Props
 
 名称 | 类型 | 默认值 | 说明 | 必传

src/tabs/__test__/__snapshots__/demo.test.js.snap

@@ -85,9 +85,16 @@ exports[`Tabs Tabs base demo works fine 1`] = `
   </t-tabs>
   <t-tabs
     defaultValue="{{0}}"
+    sticky="{{true}}"
+    stickyProps="{{
+      Object {
+        "zIndex": 2,
+      }
+    }}"
     tClass="custom-tabs"
     bind:change="onTabsChange"
     bind:click="onTabsClick"
+    bind:scroll="onStickyScroll"
   >
     <t-tab-panel
       label="标签页一"

src/tabs/_example/base/index.js

@@ -1,4 +1,9 @@
 Component({
+  data: {
+    stickyProps: {
+      zIndex: 2,
+    },
+  },
   methods: {
     onTabsChange(event) {
       console.log(`Change tab, tab-panel value is ${event.detail.value}.`);
@@ -7,5 +12,9 @@ Component({
     onTabsClick(event) {
       console.log(`Click tab, tab-panel value is ${event.detail.value}.`);
     },
+
+    onStickyScroll(event) {
+      console.log(event.detail);
+    },
   },
 });

src/tabs/_example/base/index.wxml

@@ -9,7 +9,15 @@
   <t-tab-panel label="标签页三" value="2">标签三内容</t-tab-panel>
 </t-tabs>
 
-<t-tabs defaultValue="{{0}}" bind:change="onTabsChange" bind:click="onTabsClick" t-class="custom-tabs">
+<t-tabs
+  defaultValue="{{0}}"
+  sticky
+  stickyProps="{{stickyProps}}"
+  bind:change="onTabsChange"
+  bind:click="onTabsClick"
+  bind:scroll="onStickyScroll"
+  t-class="custom-tabs"
+>
   <t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
   <t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
   <t-tab-panel label="标签页三" value="2">标签三内容</t-tab-panel>

src/tabs/props.ts

@@ -38,6 +38,15 @@ const props: TdTabsProps = {
   defaultValue: {
     type: null,
   },
+  /** 是否开启粘性布局 */
+  sticky: {
+    type: Boolean,
+    value: false,
+  },
+  /** sticky 属性 */
+  stickyProps: {
+    type: Object,
+  },
 };
 
 export default props;

src/tabs/tabs.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "t-sticky": "tdesign-miniprogram/sticky/sticky"
+  }
 }

src/tabs/tabs.less

@@ -1,5 +1,7 @@
 @import '../common/style/index.less';
 
+@tab-nav-background-color: #fff;
+
 @tab-item-height--horizontal: 92rpx;
 @tab-item-height--vertical: 108rpx;
 @tab-item-width--vertical: 208rpx;
@@ -14,6 +16,7 @@
 @tab-track-thickness: 4rpx;
 
 page {
+  --td-tab-nav-bg-color: @tab-nav-background-color;
   --td-tab-item-color: @tab-item-color;
   --td-tab-item-active-color: @tab-item-active-color;
   --td-tab-item-disabled-color: @tab-item-disabled-color;
@@ -23,7 +26,13 @@ page {
 }
 
 .@{prefix}-tabs {
-  display: flex;
+  position: relative;
+
+  &__wrapper {
+    display: flex;
+    overflow: hidden;
+  }
+
   font-size: 28rpx;
   background-color: #fff;
 
@@ -48,7 +57,6 @@ page {
 
   &__nav {
     position: relative;
-    z-index: 0;
     user-select: none;
     width: 100%;
     display: flex;
@@ -82,6 +90,7 @@ page {
 
     .@{prefix}-tabs__scroll {
       position: relative;
+      background-color: var(--td-tab-nav-bg-color, @tab-nav-background-color);
 
       &::after {
         content: '';
@@ -154,6 +163,7 @@ page {
 
     .@{prefix}-tabs__content {
       width: 100%;
+      // overflow: hidden;
     }
   }
 

src/tabs/tabs.ts

@@ -234,6 +234,10 @@ export default class Tabs extends SuperComponent {
     }
   }
 
+  onTouchScroll(event: WechatMiniprogram.CustomEvent) {
+    this._trigger('scroll', event.detail);
+  }
+
   changeIndex(index) {
     const currentTab = this.data.tabs[index];
     if (!currentTab?.disabled && index !== this.data.currentIndex) {

src/tabs/tabs.wxml

@@ -1,26 +1,37 @@
 <wxs src="./tabs.wxs" module="filters" />
-<view class="{{prefix}}-class {{classPrefix}} {{classPrefix}}--{{placement}}">
-  <scroll-view
-    class="{{classPrefix}}__scroll"
-    enable-flex
-    scroll-left="{{offset}}"
-    scroll-x="{{isScrollX}}"
-    scroll-y="{{isScrollY}}"
-    scroll-with-animation
+
+<view class="{{classPrefix}} {{classPrefix}}--{{placement}} {{prefix}}-class">
+  <t-sticky
+    disabled="{{ !sticky }}"
+    z-index="{{ stickyProps.zIndex || '1' }}"
+    offset-top="{{ stickyProps.offsetTop }}"
+    container="{{ stickyProps.container }}"
+    bind:scroll="onTouchScroll"
   >
-    <view class="{{classPrefix}}__nav">
-      <view
-        wx:for="{{tabs}}"
-        wx:key="index"
-        data-index="{{index}}"
-        class="{{classPrefix}}__item {{prefix}}-class-item {{item.disabled ? (prefix + '-is-disabled') : '' }} {{currentIndex === index ? prefix + '-is-active ' + prefix + '-class-active' : ''}}"
-        bind:tap="onTabTap"
+    <view class="{{classPrefix}}__wrapper">
+      <scroll-view
+        class="{{classPrefix}}__scroll"
+        enable-flex
+        scroll-left="{{offset}}"
+        scroll-x="{{isScrollX}}"
+        scroll-y="{{isScrollY}}"
+        scroll-with-animation
       >
-        {{item.label}}
-      </view>
-      <view class="{{classPrefix}}__track {{prefix}}-class-track" style="{{trackStyle}}" />
+        <view class="{{classPrefix}}__nav">
+          <view
+            wx:for="{{tabs}}"
+            wx:key="index"
+            data-index="{{index}}"
+            class="{{classPrefix}}__item {{prefix}}-class-item {{item.disabled ? (prefix + '-is-disabled') : '' }} {{currentIndex === index ? prefix + '-is-active ' + prefix + '-class-active' : ''}}"
+            bind:tap="onTabTap"
+          >
+            {{item.label}}
+          </view>
+          <view class="{{classPrefix}}__track {{prefix}}-class-track" style="{{trackStyle}}" />
+        </view>
+      </scroll-view>
     </view>
-  </scroll-view>
+  </t-sticky>
   <view
     class="{{classPrefix}}__content"
     bind:touchstart="onTouchStart"

src/tabs/type.ts

@@ -3,7 +3,7 @@
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
-
+import { StickyProps } from '../sticky/index';
 export interface TdTabsProps {
   /**
    * 动画效果设置。其中 duration 表示动画时长
@@ -57,6 +57,21 @@ export interface TdTabsProps {
     type: null;
     value?: TabValue;
   };
+  /**
+   * 是否开启粘性布局
+   * @default false
+   */
+  sticky?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /**
+   * 透传 sticky 属性
+   */
+  stickyProps?: {
+    type: ObjectConstructor;
+    value?: StickyProps;
+  };
 }
 
 export interface TdTabPanelProps {