diff --git a/src/back-top/README.en-US.md b/src/back-top/README.en-US.md
index a2fe1252b..d7e48bc8b 100644
--- a/src/back-top/README.en-US.md
+++ b/src/back-top/README.en-US.md
@@ -9,7 +9,7 @@ name | type | default | description | required
custom-style `v0.25.0` | String | - | \- | N
external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N
fixed | Boolean | true | \- | N
-icon | String / Slot | 'backtop' | \- | N
+icon | String / Object / Slot | - | \- | N
text | String | '' | \- | N
theme | String | round | options:round/half-round/round-dark/half-round-dark | N
diff --git a/src/back-top/README.md b/src/back-top/README.md
index 86edc98c7..d7173df8e 100644
--- a/src/back-top/README.md
+++ b/src/back-top/README.md
@@ -32,7 +32,7 @@ isComponent: true
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
external-classes | Array | - | 组件类名,分别用于设置外层元素、图标、文本内容等元素类名。`['t-class', 't-class-icon', 't-class-text']` | N
fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
-icon | String / Slot | 'backtop' | 图标 | N
+icon | String / Object / Slot | - | 图标 | N
text | String | '' | 文案 | N
theme | String | round | 预设的样式类型。可选项:round/half-round/round-dark/half-round-dark | N
diff --git a/src/back-top/__test__/__snapshots__/demo.test.js.snap b/src/back-top/__test__/__snapshots__/demo.test.js.snap
index fba8e54e8..739b6a071 100644
--- a/src/back-top/__test__/__snapshots__/demo.test.js.snap
+++ b/src/back-top/__test__/__snapshots__/demo.test.js.snap
@@ -14,7 +14,7 @@ exports[`BackTop BackTop half-round demo works fine 1`] = `
diff --git a/src/back-top/_example/half-round/index.js b/src/back-top/_example/half-round/index.js
index ff2387ad3..8007e3848 100644
--- a/src/back-top/_example/half-round/index.js
+++ b/src/back-top/_example/half-round/index.js
@@ -1,6 +1,6 @@
Component({
data: {
- backTopTheme: 'half-round',
+ backTopTheme: 'half-round-dark',
backTopText: '返回顶部',
},
methods: {
diff --git a/src/back-top/back-top.less b/src/back-top/back-top.less
index e9cdde791..c0a49e5a4 100644
--- a/src/back-top/back-top.less
+++ b/src/back-top/back-top.less
@@ -32,34 +32,34 @@
transition: height 0.2s;
height: auto;
- &.@{prefix}-is-fixed {
+ &.@{backtop}--fixed {
position: fixed;
right: @back-top-fixed-right;
bottom: @back-top-fixed-bottom;
}
- &.@{prefix}-is-round,
- &.@{prefix}-is-round-dark {
+ &.@{backtop}--round,
+ &.@{backtop}--round-dark {
width: @back-top-round-width;
height: @back-top-round-width;
border-radius: @back-top-round-border-radius;
}
- &.@{prefix}-is-round,
- &.@{prefix}-is-half-round {
+ &.@{backtop}--round,
+ &.@{backtop}--half-round {
color: @back-top-round-color;
border: 1rpx solid @back-top-round-border-color;
background-color: @back-top-round-bg-color;
}
- &.@{prefix}-is-round-dark,
- &.@{prefix}-is-half-round-dark {
+ &.@{backtop}--round-dark,
+ &.@{backtop}--half-round-dark {
color: @back-top-round-dark-color;
background-color: @back-top-round-dark-bg-color;
}
- &.@{prefix}-is-half-round,
- &.@{prefix}-is-half-round-dark {
+ &.@{backtop}--half-round,
+ &.@{backtop}--half-round-dark {
width: @back-top-half-round-width;
height: @back-top-half-round-height;
border-radius: @back-top-half-round-border-radius 0 0 @back-top-half-round-border-radius;
@@ -68,6 +68,9 @@
.@{backtop}__text {
width: 2em;
+ }
+
+ .@{backtop}__icon:not(:empty) + .@{backtop}__text {
margin-left: (@spacer / 2);
}
}
diff --git a/src/back-top/back-top.ts b/src/back-top/back-top.ts
index 40e80e73f..24ba80b2b 100644
--- a/src/back-top/back-top.ts
+++ b/src/back-top/back-top.ts
@@ -7,29 +7,34 @@ const name = `${prefix}-back-top`;
@wxComponent()
export default class BackTop extends SuperComponent {
- /**
- * Component properties
- */
externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-text`];
+ options = {
+ multipleSlots: true,
+ };
+
properties = props;
- /**
- * Component initial data
- */
data = {
prefix,
classPrefix: name,
};
- /**
- * Component methods
- */
- toTop() {
- this.triggerEvent('to-top');
- wx.pageScrollTo({
- scrollTop: 0,
- duration: 300,
- });
- }
+ observers = {
+ icon(icon) {
+ this.setData({
+ iconData: icon,
+ });
+ },
+ };
+
+ methods = {
+ toTop() {
+ this.triggerEvent('to-top');
+ wx.pageScrollTo({
+ scrollTop: 0,
+ duration: 300,
+ });
+ },
+ };
}
diff --git a/src/back-top/back-top.wxml b/src/back-top/back-top.wxml
index 5cc27fe18..9bc522e63 100644
--- a/src/back-top/back-top.wxml
+++ b/src/back-top/back-top.wxml
@@ -1,9 +1,14 @@
+
-
- {{text}}
+
+
+
+
+
+ {{text}}
diff --git a/src/back-top/props.ts b/src/back-top/props.ts
index 6afe4f174..19c19c0bd 100644
--- a/src/back-top/props.ts
+++ b/src/back-top/props.ts
@@ -22,8 +22,8 @@ const props: TdBackTopProps = {
},
/** 图标 */
icon: {
- type: String,
- value: 'backtop',
+ type: null,
+ value: null,
},
/** 文案 */
text: {
diff --git a/src/back-top/type.ts b/src/back-top/type.ts
index 59f49acfc..6f992916a 100644
--- a/src/back-top/type.ts
+++ b/src/back-top/type.ts
@@ -30,11 +30,11 @@ export interface TdBackTopProps {
};
/**
* 图标
- * @default 'backtop'
+ * @default null
*/
icon?: {
- type: StringConstructor;
- value?: string;
+ type: null;
+ value?: string | object;
};
/**
* 文案
diff --git a/src/common/template/icon.wxml b/src/common/template/icon.wxml
new file mode 100644
index 000000000..5e755f382
--- /dev/null
+++ b/src/common/template/icon.wxml
@@ -0,0 +1,15 @@
+
+
+