diff --git a/src/back-top/__test__/__snapshots__/demo.test.js.snap b/src/back-top/__test__/__snapshots__/demo.test.js.snap
index c56e99e52..fba8e54e8 100644
--- a/src/back-top/__test__/__snapshots__/demo.test.js.snap
+++ b/src/back-top/__test__/__snapshots__/demo.test.js.snap
@@ -9,3 +9,13 @@ exports[`BackTop BackTop base demo works fine 1`] = `
/>
`;
+
+exports[`BackTop BackTop half-round demo works fine 1`] = `
+
+
+
+`;
diff --git a/src/back-top/__test__/demo.test.js b/src/back-top/__test__/demo.test.js
index 000147513..162d97d77 100644
--- a/src/back-top/__test__/demo.test.js
+++ b/src/back-top/__test__/demo.test.js
@@ -5,7 +5,7 @@
import simulate from 'miniprogram-simulate';
import path from 'path';
-const mapper = ['base'];
+const mapper = ['base', 'half-round'];
describe('BackTop', () => {
mapper.forEach((demoName) => {
diff --git a/src/back-top/_example/back-top.json b/src/back-top/_example/back-top.json
index cd56e0cc0..817875891 100644
--- a/src/back-top/_example/back-top.json
+++ b/src/back-top/_example/back-top.json
@@ -3,6 +3,7 @@
"navigationBarBackgroundColor": "#fff",
"usingComponents": {
"t-skeleton": "tdesign-miniprogram/skeleton/skeleton",
- "base": "./base"
+ "base": "./base",
+ "half-round": "./half-round"
}
}
diff --git a/src/back-top/_example/back-top.less b/src/back-top/_example/back-top.less
index bd1cfaa30..08665091e 100644
--- a/src/back-top/_example/back-top.less
+++ b/src/back-top/_example/back-top.less
@@ -1,18 +1,14 @@
page {
background: #fff;
- .skeleton-text {
- border-radius: 16rpx;
- }
-
.skeleton-item {
- padding-bottom: 24rpx;
+ padding-bottom: 48rpx;
}
.container-flex {
display: flex;
justify-content: space-between;
- margin-top: 32rpx;
+ margin-top: 48rpx;
flex-wrap: wrap;
}
}
diff --git a/src/back-top/_example/back-top.ts b/src/back-top/_example/back-top.ts
index 73539ca30..a235768b5 100644
--- a/src/back-top/_example/back-top.ts
+++ b/src/back-top/_example/back-top.ts
@@ -1,15 +1,9 @@
Page({
data: {
+ round: false,
+ halfRound: false,
showBackTop: false,
- rowCols: [
- { width: '332rpx', height: '342rpx' },
- { width: '332rpx', height: '32rpx' },
- { width: '214rpx', height: '32rpx' },
- [
- { width: '186rpx', height: '32rpx' },
- { width: '64rpx', height: '32rpx', marginLeft: '82rpx' },
- ],
- ],
+ rowCol: [{ size: '163.5px', borderRadius: '12px' }, 1, { width: '61%' }],
},
windowHeight: null,
@@ -24,7 +18,22 @@ Page({
}
},
- onBtnClick() {
+ onBtnClick(e: any) {
+ const source = e.currentTarget.dataset.source as string;
+ if (source === 'round') {
+ this.setData({
+ round: true,
+ halfRound: false,
+ });
+ }
+
+ if (source === 'half-round') {
+ this.setData({
+ halfRound: true,
+ round: false,
+ });
+ }
+
wx.pageScrollTo({ duration: 300, scrollTop: 1000 });
},
});
diff --git a/src/back-top/_example/back-top.wxml b/src/back-top/_example/back-top.wxml
index dbd656236..4bf95870c 100644
--- a/src/back-top/_example/back-top.wxml
+++ b/src/back-top/_example/back-top.wxml
@@ -2,19 +2,29 @@
BackTop 返回顶部
用于当页面过长往下滑动时，帮助用户快速回到页面顶部。
-
- 圆白底
+
+
+ 圆形返回顶部
+
+
+
+
+ 半圆形返回顶部
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
+
+
+
diff --git a/src/back-top/_example/half-round/index.js b/src/back-top/_example/half-round/index.js
new file mode 100644
index 000000000..ff2387ad3
--- /dev/null
+++ b/src/back-top/_example/half-round/index.js
@@ -0,0 +1,11 @@
+Component({
+ data: {
+ backTopTheme: 'half-round',
+ backTopText: '返回顶部',
+ },
+ methods: {
+ onToTop(e) {
+ console.log('backToTop', e);
+ },
+ },
+});
diff --git a/src/back-top/_example/half-round/index.json b/src/back-top/_example/half-round/index.json
new file mode 100644
index 000000000..712dec7ec
--- /dev/null
+++ b/src/back-top/_example/half-round/index.json
@@ -0,0 +1,6 @@
+{
+ "component": true,
+ "usingComponents": {
+ "t-back-top": "tdesign-miniprogram/back-top/back-top"
+ }
+}
diff --git a/src/back-top/_example/half-round/index.wxml b/src/back-top/_example/half-round/index.wxml
new file mode 100644
index 000000000..d75a6679d
--- /dev/null
+++ b/src/back-top/_example/half-round/index.wxml
@@ -0,0 +1 @@
+
diff --git a/src/back-top/_example/half-round/index.wxss b/src/back-top/_example/half-round/index.wxss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/back-top/back-top.less b/src/back-top/back-top.less
index a05be55d3..e9cdde791 100644
--- a/src/back-top/back-top.less
+++ b/src/back-top/back-top.less
@@ -1,10 +1,25 @@
-// @import (css) '../common/index.wxss';
@import '../common/style/index.less';
-@backtop: ~"@{prefix}-back-top";
+@backtop: ~'@{prefix}-back-top';
@back-top-text-font-size: @font-size;
-@back-top-icon-font-size: 32rpx;
-@back-top-default-color: #666;
+@back-top-text-line-height: 24rpx;
+@back-top-icon-font-size: 44rpx;
+@back-top-round-width: 96rpx;
+@back-top-half-round-width: 120rpx;
+@back-top-half-round-height: 80rpx;
+@back-top-fixed-right: @spacer;
+@back-top-fixed-bottom: @spacer-2;
+
+@back-top-round-color: var(--td-back-top-round-color, @font-gray-1); // 'round'主题内容颜色
+@back-top-round-bg-color: var(--td-back-top-round-bg-color, @white-color-1); // 'round'主题背景颜色
+@back-top-round-border-color: var(--td-back-top-round-border-color, @gray-color-4); // 'round'主题边框颜色
+@back-top-round-border-radius: var(--td-back-top-round-border-radius, @radius-circle); // 'round'主题圆角大小
+@back-top-round-dark-color: var(--td-back-top-round-dark-color, @font-white-1); // 'round-dark'主题内容颜色
+@back-top-round-dark-bg-color: var(--td-back-top-round-dark-bg-color, @gray-color-14); // 'round-dark'主题背景颜色
+@back-top-half-round-border-radius: var(
+ --td-back-top-half-round-border-radius,
+ @radius-round
+); // 'round-dark'主题圆角大小
.@{backtop} {
display: flex;
@@ -14,90 +29,58 @@
background-color: transparent;
overflow: hidden;
box-sizing: border-box;
- transition: height .2s;
+ transition: height 0.2s;
height: auto;
&.@{prefix}-is-fixed {
position: fixed;
- right: 32rpx;
- bottom: 133rpx;
+ right: @back-top-fixed-right;
+ bottom: @back-top-fixed-bottom;
}
&.@{prefix}-is-round,
&.@{prefix}-is-round-dark {
- width: 96rpx;
- height: 96rpx;
- border-radius: 50%;
-
- .@{backtop}__icon {
- margin: 0;
- // border: none;
- border-radius: 0;
- background-color: transparent;
- }
-
- .@{backtop}__text {
- padding: 0;
- margin-top: 0;
- }
+ width: @back-top-round-width;
+ height: @back-top-round-width;
+ border-radius: @back-top-round-border-radius;
}
&.@{prefix}-is-round,
&.@{prefix}-is-half-round {
- background-color: rgb(255, 255, 255);
- color: #333;
- border: 1rpx solid;
- border-color: #ddd;
-
- .@{backtop}__icon,
- .@{backtop}__text {
- color: #333;
- }
+ 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 {
- background-color: #000;
- color: #fff;
-
- .@{backtop}__icon,
- .@{backtop}__text {
- color: #fff;
- }
+ color: @back-top-round-dark-color;
+ background-color: @back-top-round-dark-bg-color;
}
&.@{prefix}-is-half-round,
&.@{prefix}-is-half-round-dark {
- width: 120rpx;
- height: 80rpx;
- border-radius: 120rpx 0 0 120rpx;
+ 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;
flex-direction: row;
right: 0;
- .@{backtop}__icon {
- margin: 0;
- border-radius: 0;
- background-color: transparent;
- }
-
.@{backtop}__text {
- padding: 0;
- margin-left: 8rpx;
width: 2em;
+ margin-left: (@spacer / 2);
}
}
&__text {
font-size: @back-top-text-font-size;
- color: @back-top-default-color;
- line-height: 24rpx;
+ line-height: @back-top-text-line-height;
}
&__icon {
display: flex;
justify-content: center;
align-items: center;
- color: @back-top-default-color;
font-size: @back-top-icon-font-size;
}
}