docs(indexes): update code sample

Tencent · Jul 21, 2022 · 3879690 · 3879690
1 parent c68ba79
commit 3879690
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 100 deletions.
diff --git a/example/app.json b/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",

diff --git a/src/indexes/README.md b/src/indexes/README.md
@@ -21,34 +21,7 @@ isComponent: true
 
 <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
 

diff --git a/src/indexes/_example/display.json b/src/indexes/_example/display.json
diff --git a/src/indexes/_example/display.ts b/src/indexes/_example/display.ts
diff --git a/src/indexes/_example/data.js → src/indexes/_example/display/index.js b/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}`,
+    });
+  },
+});
diff --git a/src/indexes/_example/display/index.json b/src/indexes/_example/display/index.json
@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "Indexes 索引",
+  "navigationBarBackgroundColor": "#fff",
+  "usingComponents": {
+    "t-indexes": "tdesign-miniprogram/indexes/indexes"
+  }
+}
diff --git a/src/indexes/_example/display.wxml → src/indexes/_example/display/index.wxml b/src/indexes/_example/display.wxml → src/indexes/_example/display/index.wxml
diff --git a/src/indexes/_example/display.less → src/indexes/_example/display/index.wxss b/src/indexes/_example/display.less → src/indexes/_example/display/index.wxss
diff --git a/src/indexes/_example/indexes.ts b/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' });
   },
 });
diff --git a/src/indexes/_example/indexes.wxml b/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>