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 }}