Merge pull request #649 from Tencent/docs/indexes

docs(indexes): update code sample

example/app.json

@@ -35,7 +35,7 @@
     "pages/transition/transition",
     "pages/popup/popup",
     "pages/indexes/indexes",
-    "pages/indexes/display",
+    "pages/indexes/display/index",
     "pages/steps/steps",
     "pages/dropdown-menu/dropdown-menu",
     "pages/drawer/drawer",

src/cell-group/cell-group.ts

@@ -7,7 +7,7 @@ const name = `${prefix}-cell-group`;
 
 @wxComponent()
 export default class CellGroup extends SuperComponent {
-  externalClasses = ['t-class'];
+  externalClasses = [`${prefix}-class`, `${prefix}-class-title`];
 
   options = {
     addGlobalClass: true,
@@ -22,6 +22,7 @@ export default class CellGroup extends SuperComponent {
    * 组件的初始数据
    */
   data = {
+    prefix,
     classPrefix: name,
   };
 }

src/cell-group/cell-group.wxml

@@ -1,4 +1,4 @@
-<view wx:if="{{ title }}" class="{{ classPrefix }}__title"> {{ title }} </view>
-<view class="t-class {{ classPrefix }} {{ bordered ? classPrefix + '--bordered' : '' }}">
+<view wx:if="{{ title }}" class="{{ classPrefix }}__title {{prefix}}-class-title"> {{ title }} </view>
+<view class="{{prefix}}-class {{ classPrefix }} {{ bordered ? classPrefix + '--bordered' : '' }}">
   <slot />
 </view>

src/indexes/README.md

@@ -14,41 +14,26 @@ isComponent: true
   "t-indexes": "tdesign-miniprogram/indexes/indexes"
 }
 ```
+### 主题定制
+CSS 变量名|说明
+--|--
+--td-indexes-title-color | 索引标题颜色;
+--td-indexes-title-bg-color | 索引标题背景颜色;
+--td-indexes-children-text-color | 索引内容文本颜色;
+--td-indexes-children-bg-color | 索引内容背景颜色;
+--td-indexes-index-text-color | 索引文本颜色;
+--td-indexes-index-text-active-color | 索引文本激活态颜色;
+--td-indexes-index-bg-color | 索引背景颜色;
+--td-indexes-tips-text-color | 索引提示信息颜色;
+--td-indexes-tips-bg-color | 索引提示信息颜色;
 
 ## 代码演示
 
 ### 基础索引
 
 <img src="https://tdesign.gtimg.com/miniprogram/readme/indexes.png" width="375px" height="50%">
 
-```html
-<t-indexes list="{{letter}}" bind:select="onSelect"> </t-indexes>
-```
-
-```js
-Page({
-  data: {
-    letter: [
-      {
-        title: 'A开头',
-        index: 'A',
-        children: [{ title: '阿坝' }, { title: '阿拉善' }, { title: '阿里' }, { title: '安康' }],
-      },
-      {
-        title: 'B开头',
-        index: 'B',
-        children: [{ title: '北京' }, { title: '白银' }, { title: '保定' }],
-      },
-    ],
-  },
-  onSelect(e) {
-    const { indexes } = e.detail;
-    const group = this.data.letter[indexes[0]];
-    const city = group.children[indexes[1]];
-    wx.showToast({ icon: 'none', title: `你选择了: ${group.title}>${city.title}` });
-  },
-});
-```
+{{ display }}
 
 ### API
 

src/indexes/_example/data.js → src/indexes/_example/display/index.js

@@ -183,4 +183,57 @@ const number = [
   },
 ];
 
-export { letter, number };
+Page({
+  data: {
+    list: letter,
+    barHeight: null,
+  },
+  onLoad(options) {
+    const { type } = options;
+    let list = letter;
+    if (type === 'number') {
+      list = number;
+    }
+
+    this.setData({ list });
+  },
+  onReady() {
+    this.getTopHeight().then((res) => {
+      const { windowHeight } = wx.getSystemInfoSync();
+      this.setData({
+        barHeight: windowHeight - res.top,
+      });
+    });
+  },
+  onShow() {},
+  getTopHeight() {
+    return new Promise((resolve) => {
+      const query = wx.createSelectorQuery();
+      query
+        .select('#bar')
+        .boundingClientRect((res) => {
+          resolve(res);
+        })
+        .exec();
+    });
+  },
+  tapShowLetter() {
+    this.setData({ list: letter });
+  },
+  tapShowNumber() {
+    this.setData({ list: number });
+  },
+  onSelect(e) {
+    const { indexes } = e.detail;
+    if (indexes.length < 2) {
+      console.warn('需要两个index才能确定city');
+      return;
+    }
+    const group = this.data.list[indexes[0]];
+    const city = group.children[indexes[1]];
+    wx.showToast({
+      icon: 'none',
+      title: `你选择了: ${group.title}>${city.title}`,
+    });
+  },
+});

src/indexes/_example/display/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "t-indexes": "tdesign-miniprogram/indexes/indexes"
+  }
+}

src/indexes/_example/indexes.ts

@@ -11,9 +11,9 @@ Page({
   onReady() {},
   onShow() {},
   tapShowLetter() {
-    wx.navigateTo({ url: '/pages/indexes/display?type=letter' });
+    wx.navigateTo({ url: '/pages/indexes/display/index?type=letter' });
   },
   tapShowNumber() {
-    wx.navigateTo({ url: '/pages/indexes/display?type=number' });
+    wx.navigateTo({ url: '/pages/indexes/display/index?type=number' });
   },
 });

src/indexes/_example/indexes.wxml

@@ -4,10 +4,10 @@
   <t-demo title="01 类型" desc="基础索引类型">
     <view class="box">
       <t-button t-class="type-button" variant="plain" size="large" block bind:tap="tapShowLetter">
-        <navigator url="/pages/indexes/display">字母索引</navigator>
+        <navigator url="/pages/indexes/display/index">字母索引</navigator>
       </t-button>
       <t-button t-class="type-button" variant="plain" size="large" block bind:tap="tapShowNumber">
-        <navigator url="/pages/indexes/display">数字索引</navigator>
+        <navigator url="/pages/indexes/display/index">数字索引</navigator>
       </t-button>
     </view>
   </t-demo>

src/indexes/indexes.less

@@ -1,3 +1,5 @@
+@import '../common/style/index.less';
+
 @font-size: 32rpx;
 @color: #000;
 
@@ -9,21 +11,36 @@
 
 @primary-color: #0071ce;
 
-@background-color: #f8f8f8;
 @front-background-color: white;
 
 @active-color: #0052d9;
 @active-font-size: 32rpx;
 @active-line-height: 56rpx;
 
-.t-indexes {
-  background-color: @background-color;
+page {
+  --td-indexes-title-color: @text-level-3-color;
+  --td-indexes-title-bg-color: @bg-color-fade;
+  --td-indexes-children-text-color: @color;
+  --td-indexes-children-bg-color: @front-background-color;
+  --td-indexes-index-text-color: @hint-color;
+  --td-indexes-index-text-active-color: @active-color;
+  --td-indexes-index-bg-color: @front-background-color;
+  --td-indexes-tips-text-color: @front-background-color;
+  --td-indexes-tips-bg-color: @active-color;
+}
+
+.@{prefix}-indexes {
   position: relative;
 
+  &__title {
+    color: var(--td-indexes-title-color);
+    background-color: var(--td-indexes-title-bg-color);
+  }
+
   &__row {
     font-size: @font-size;
-    color: @color;
-    background-color: @front-background-color;
+    color: var(--td-indexes-children-text-color);
+    background-color: var(--td-indexes-children-bg-color);
     height: @cell-height;
     display: flex;
     align-items: center;
@@ -40,7 +57,8 @@
     right: 0;
     width: 100rpx;
     font-size: 24rpx;
-    color: @hint-color;
+    color: var(--td-indexes-index-text-color);
+    background-color: var(--td-indexes-index-bg-color);
     font-size: @hint-font-size;
     line-height: @hint-line-height;
     text-align: center;
@@ -63,7 +81,7 @@
     position: relative;
 
     &.is-actived {
-      color: @active-color;
+      color: var(--td-indexes-index-text-active-color);
       font-size: @active-font-size;
       line-height: @active-line-height;
     }
@@ -77,8 +95,8 @@
     vertical-align: middle;
     font-size: 40rpx;
     font-weight: 700;
-    color: white;
-    background-color: @active-color;
+    color: var(--td-indexes-tips-text-color);
+    background-color: var(--td-indexes-tips-bg-color);
     border-radius: 40rpx 40rpx 0;
     position: absolute;
     top: 0;

src/indexes/indexes.ts

@@ -9,7 +9,7 @@ const topOffset = 40; // 滑动选中高亮的顶部偏移(px)
 
 @wxComponent()
 export default class IndexBar extends SuperComponent {
-  externalClasses = ['t-class', 't-class-index'];
+  externalClasses = [`${prefix}-class`, `${prefix}-class-index`];
 
   properties = props;
 
@@ -30,6 +30,7 @@ export default class IndexBar extends SuperComponent {
   };
 
   data = {
+    prefix,
     classPrefix,
     clientHeight: 0,
     groups: [],

src/indexes/indexes.wxml

@@ -1,4 +1,4 @@
-<view class="{{classPrefix}} t-class">
+<view class="{{classPrefix}} {{prefix}}-class">
   <scroll-view
     class="{{classPrefix}}__content"
     scroll-y
@@ -8,7 +8,7 @@
     bindscroll="onListScroll"
   >
     <t-cell-group
-      t-class="{{classPrefix}}__group"
+      t-class-title="{{classPrefix}}__title"
       class="{{classPrefix}}__group"
       wx:for="{{ groups }}"
       wx:key="index"
@@ -29,7 +29,7 @@
       ></t-cell>
     </t-cell-group>
   </scroll-view>
-  <view class="{{classPrefix}}__index t-class-index">
+  <view class="{{classPrefix}}__index {{prefix}}-class-index">
     <view
       class="{{classPrefix}}__bar"
       id="id-{{classPrefix}}__bar"
@@ -46,10 +46,7 @@
         data-group="{{ group }}"
       >
         {{ group.index }}
-        <view
-          class="{{classPrefix}}__tips"
-          wx:if="{{ showScrollTip && currentGroup.index === group.index }}"
-        >
+        <view class="{{classPrefix}}__tips" wx:if="{{ showScrollTip && currentGroup.index === group.index }}">
           <view class="{{classPrefix}}__tips-text">{{ currentGroup.index }}</view>
         </view>
       </view>