diff --git a/example/app.json b/example/app.json
index de0ee2b27..ca1ce14b4 100644
--- 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/cell-group/cell-group.ts b/src/cell-group/cell-group.ts
index 12cfc1d02..e242e2251 100644
--- a/src/cell-group/cell-group.ts
+++ b/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,
};
}
diff --git a/src/cell-group/cell-group.wxml b/src/cell-group/cell-group.wxml
index 328fc759c..b7716b2a9 100644
--- a/src/cell-group/cell-group.wxml
+++ b/src/cell-group/cell-group.wxml
@@ -1,4 +1,4 @@
- {{ title }}
-
+ {{ title }}
+
diff --git a/src/indexes/README.md b/src/indexes/README.md
index 31a607f35..2103d32b6 100644
--- a/src/indexes/README.md
+++ b/src/indexes/README.md
@@ -14,6 +14,18 @@ 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 | 索引提示信息颜色;
## 代码演示
@@ -21,34 +33,7 @@ isComponent: true
-```html
-
-```
-
-```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
deleted file mode 100644
index f5de61752..000000000
--- a/src/indexes/_example/display.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "navigationBarTitleText": "Indexes 索引",
- "navigationBarBackgroundColor": "#fff"
-}
diff --git a/src/indexes/_example/display.ts b/src/indexes/_example/display.ts
deleted file mode 100644
index 74fdf8f6d..000000000
--- a/src/indexes/_example/display.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * @Author: shiyanzhang
- * @Date: 2021-09-26 15:06:16
- * @Description:
- * @FilePath: /tdesign-miniprogram/example/pages/indexes/display.ts
- */
-import { letter, number } from './data.js';
-
-Page({
- data: {
- list: letter,
- barHeight: null as any,
- },
- onLoad(options) {
- const { type } = options;
- let list = letter;
- if (type === 'number') {
- list = number;
- }
-
- this.setData({ list });
- },
- onReady() {
- this.getTopHeight().then((res: any) => {
- 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/data.js b/src/indexes/_example/display/index.js
similarity index 78%
rename from src/indexes/_example/data.js
rename to src/indexes/_example/display/index.js
index 30e5e7933..357314c50 100644
--- a/src/indexes/_example/data.js
+++ b/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
new file mode 100644
index 000000000..e7a53908b
--- /dev/null
+++ b/src/indexes/_example/display/index.json
@@ -0,0 +1,5 @@
+{
+ "usingComponents": {
+ "t-indexes": "tdesign-miniprogram/indexes/indexes"
+ }
+}
diff --git a/src/indexes/_example/display.wxml b/src/indexes/_example/display/index.wxml
similarity index 100%
rename from src/indexes/_example/display.wxml
rename to src/indexes/_example/display/index.wxml
diff --git a/src/indexes/_example/display.less b/src/indexes/_example/display/index.wxss
similarity index 100%
rename from src/indexes/_example/display.less
rename to src/indexes/_example/display/index.wxss
diff --git a/src/indexes/_example/indexes.ts b/src/indexes/_example/indexes.ts
index d4d64489a..24e6db829 100644
--- 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
index 04d0b2603..fc9d320ba 100644
--- a/src/indexes/_example/indexes.wxml
+++ b/src/indexes/_example/indexes.wxml
@@ -4,10 +4,10 @@
- 字母索引
+ 字母索引
- 数字索引
+ 数字索引
diff --git a/src/indexes/indexes.less b/src/indexes/indexes.less
index 2b04a7886..f89802960 100644
--- a/src/indexes/indexes.less
+++ b/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;
diff --git a/src/indexes/indexes.ts b/src/indexes/indexes.ts
index 7095577a6..2e3ce043b 100644
--- a/src/indexes/indexes.ts
+++ b/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: [],
diff --git a/src/indexes/indexes.wxml b/src/indexes/indexes.wxml
index 0bf778c8d..3c1d74aae 100644
--- a/src/indexes/indexes.wxml
+++ b/src/indexes/indexes.wxml
@@ -1,4 +1,4 @@
-
+
-
+
{{ group.index }}
-
+
{{ currentGroup.index }}