diff --git a/src/loading/README.md b/src/loading/README.md index 2f7f874ea..3db231dcf 100644 --- a/src/loading/README.md +++ b/src/loading/README.md @@ -17,100 +17,37 @@ isComponent: true ## 代码演示 -### 基础加载 +### 纯icon - +{{ base }} -```html - - - -``` +### icon加文字横向 -### 图标加横向文字的加载 - - - -```html - - - - 加载中... - -``` +{{ horizontal }} -### 图标加竖向文字的加载 - - - -```html - -纯文字 - -加载失败 - -``` +### icon加文字竖向 -### 进度条加载 +{{ vertical }} - +### 纯文字 -```html - -``` +{{ text }} -```js -Page({ - data: { - progress: 100, - isLoading: false, - barLoadingTimeOut: null, - }, - - onLoad() { - const timeout = setTimeout(() => { - this.setData({ isLoading: false }); - }, 10000); - this.setData({ - progress: -1, - isLoading: true, - barLoadingTimeOut: timeout, - }); - }, - - onUnload() { - clearTimeout(this.data.barLoadingTimeOut); - }, -}); -``` +### 加载失败 -### 不同状态的加载 - -```html - -``` +{{ error }} + +### 状态 + +{{ status }} + +### 加载速度 + +{{ duration }} + +### 规格 + +{{ size }} ## API ### Loading Props diff --git a/src/loading/_example/base/index.js b/src/loading/_example/base/index.js new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ b/src/loading/_example/base/index.js @@ -0,0 +1 @@ +Component({}); diff --git a/src/loading/_example/base/index.json b/src/loading/_example/base/index.json new file mode 100644 index 000000000..dc12aafa5 --- /dev/null +++ b/src/loading/_example/base/index.json @@ -0,0 +1,6 @@ +{ + "components": true, + "usingComponents": { + "t-loading": "tdesign-miniprogram/loading/loading" + } +} diff --git a/src/loading/_example/base/index.wxml b/src/loading/_example/base/index.wxml new file mode 100644 index 000000000..aa0ea0a6c --- /dev/null +++ b/src/loading/_example/base/index.wxml @@ -0,0 +1,5 @@ + + + + + diff --git a/src/loading/_example/base/index.wxss b/src/loading/_example/base/index.wxss new file mode 100644 index 000000000..a0673afc6 --- /dev/null +++ b/src/loading/_example/base/index.wxss @@ -0,0 +1,13 @@ +.loading-container-flex { + display: flex; + align-items: center; +} + +.indicator-black { + color: #000000 !important; +} + +.loading-container-flex t-loading { + min-width: 20%; + margin-right: 40rpx; +} diff --git a/src/loading/_example/duration/index.js b/src/loading/_example/duration/index.js new file mode 100644 index 000000000..61a404ba8 --- /dev/null +++ b/src/loading/_example/duration/index.js @@ -0,0 +1,10 @@ +Component({ + data: { + duration: 800, + }, + methods: { + durationChange(e) { + this.setData({ duration: e.detail.value }); + }, + }, +}); diff --git a/src/loading/_example/duration/index.json b/src/loading/_example/duration/index.json new file mode 100644 index 000000000..81c1cd809 --- /dev/null +++ b/src/loading/_example/duration/index.json @@ -0,0 +1,7 @@ +{ + "components": true, + "usingComponents": { + "t-loading": "tdesign-miniprogram/loading/loading", + "t-slider": "tdesign-miniprogram/slider/slider" + } +} diff --git a/src/loading/_example/duration/index.wxml b/src/loading/_example/duration/index.wxml new file mode 100644 index 000000000..bbcb86e6e --- /dev/null +++ b/src/loading/_example/duration/index.wxml @@ -0,0 +1,12 @@ + + + 速度调整 + + diff --git a/src/loading/_example/duration/index.wxss b/src/loading/_example/duration/index.wxss new file mode 100644 index 000000000..ee0784dd0 --- /dev/null +++ b/src/loading/_example/duration/index.wxss @@ -0,0 +1,9 @@ +.slider-container { + display: flex; + align-items: center; + width: 718rpx; +} + +.slider-class { + flex-grow: 1; +} diff --git a/src/loading/_example/error/index.js b/src/loading/_example/error/index.js new file mode 100644 index 000000000..ae3034c18 --- /dev/null +++ b/src/loading/_example/error/index.js @@ -0,0 +1,9 @@ +Component({ + methods: { + reloadPage() { + wx.redirectTo({ + url: '/pages/loading/loading', + }); + }, + }, +}); diff --git a/src/loading/_example/error/index.json b/src/loading/_example/error/index.json new file mode 100644 index 000000000..dc12aafa5 --- /dev/null +++ b/src/loading/_example/error/index.json @@ -0,0 +1,6 @@ +{ + "components": true, + "usingComponents": { + "t-loading": "tdesign-miniprogram/loading/loading" + } +} diff --git a/src/loading/_example/error/index.wxml b/src/loading/_example/error/index.wxml new file mode 100644 index 000000000..efdf8a12a --- /dev/null +++ b/src/loading/_example/error/index.wxml @@ -0,0 +1 @@ + diff --git a/src/loading/_example/error/index.wxss b/src/loading/_example/error/index.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/src/loading/_example/horizontal/index.js b/src/loading/_example/horizontal/index.js new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ b/src/loading/_example/horizontal/index.js @@ -0,0 +1 @@ +Component({}); diff --git a/src/loading/_example/horizontal/index.json b/src/loading/_example/horizontal/index.json new file mode 100644 index 000000000..dc12aafa5 --- /dev/null +++ b/src/loading/_example/horizontal/index.json @@ -0,0 +1,6 @@ +{ + "components": true, + "usingComponents": { + "t-loading": "tdesign-miniprogram/loading/loading" + } +} diff --git a/src/loading/_example/horizontal/index.wxml b/src/loading/_example/horizontal/index.wxml new file mode 100644 index 000000000..a97c9f3e4 --- /dev/null +++ b/src/loading/_example/horizontal/index.wxml @@ -0,0 +1,7 @@ + + + + + 加载中... + + diff --git a/src/loading/_example/horizontal/index.wxss b/src/loading/_example/horizontal/index.wxss new file mode 100644 index 000000000..7979b1a85 --- /dev/null +++ b/src/loading/_example/horizontal/index.wxss @@ -0,0 +1,13 @@ +.loading-container-flex { + display: flex; + align-items: center; +} + +.indicator-black { + color: #000000 !important; +} + +.loading-container-flex t-loading { + display: flex; + margin-right: 40rpx; +} diff --git a/src/loading/_example/loading.json b/src/loading/_example/loading.json index 20398bf01..75cabc34b 100644 --- a/src/loading/_example/loading.json +++ b/src/loading/_example/loading.json @@ -2,6 +2,15 @@ "navigationBarTitleText": "Loading", "navigationBarBackgroundColor": "#fff", "usingComponents": { - "t-demo": "../../components/demo-block/index" + "t-demo": "../../components/demo-block/index", + "t-button": "tdesign-miniprogram/button/button", + "base": "./base", + "horizontal": "./horizontal", + "vertical": "./vertical", + "text": "./text", + "error": "./error", + "status": "./status", + "duration": "./duration", + "size": "./size" } } diff --git a/src/loading/_example/loading.less b/src/loading/_example/loading.less index cd80b1126..23062cc7e 100644 --- a/src/loading/_example/loading.less +++ b/src/loading/_example/loading.less @@ -1,96 +1,3 @@ page { background-color: #fff; } - -.demo { - .demo-title { - margin-top: 48rpx; - } - - .demo-desc { - margin-top: 16rpx; - } -} - -.loading-container-flex { - display: flex; - align-items: center; - margin: 36rpx 32rpx; - font-size: 24rpx; - - t-loading { - min-width: 20%; - margin-right: 40rpx; - display: flex; - } -} - -.loading-container-flex-column { - display: block; - margin-left: 32rpx; - font-size: 24rpx; - - t-loading { - display: flex; - margin-top: 32rpx; - } -} - -.loading-style { - display: flex; - margin: 36rpx 32rpx; - font-size: 24rpx; -} - -.box { - margin: 0 32rpx; -} - -.t-slider__container { - margin: 0 32rpx; -} - -.t-switch__label { - margin-right: 0px !important; -} - -.progress-btn { - display: block; - margin-top: 32rpx; -} - -.text-info { - margin-left: 24rpx; - color: rgba(0, 0, 0, 0.4); -} - -.text-m { - font-size: 28rpx; -} - -.text-l { - font-size: 32rpx; -} - -.indicator-blue { - color: #0052d9; -} - -.indicator-black { - color: #000000 !important; -} - -.text-blue { - color: #0052d9; -} - -.slider-container { - display: flex; - align-items: center; - width: 718rpx; - padding-left: 32rpx; - - .slider-class { - flex-grow: 1; - } -} diff --git a/src/loading/_example/loading.ts b/src/loading/_example/loading.ts index aa9096b3d..174690286 100644 --- a/src/loading/_example/loading.ts +++ b/src/loading/_example/loading.ts @@ -1,27 +1,7 @@ Page({ - data: { - isCheck: false, - duration: 800, - }, - - switchChange() { - const { isCheck } = this.data; - this.setData({ isCheck: !isCheck }); - }, - - durationChange(e) { - this.setData({ duration: e.detail.value }); - }, - goToProgress() { wx.redirectTo({ url: '/pages/loading/loadingProgress/loadingProgress', }); }, - - reloadPage() { - wx.redirectTo({ - url: '/pages/loading/loading', - }); - }, }); diff --git a/src/loading/_example/loading.wxml b/src/loading/_example/loading.wxml index 89871d104..3bcd3c8d6 100644 --- a/src/loading/_example/loading.wxml +++ b/src/loading/_example/loading.wxml @@ -3,78 +3,34 @@ 用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。 - - - 纯icon - - - - - - icon加文字横向 - - - - - 加载中... - - - icon加文字竖向 - - 纯文字 - - 加载失败 - - 进度条加载 - - 页面进度条加载 - + + + + + + + + + + + + + + + + + 页面进度条加载 - - - - {{isCheck?'请求发起，延迟显示loading加载':'请求结束，隐藏loading加载'}} - - + + - - - - - - 速度调整 - - + + - - 支持自定义加载规格 - - - - - + + diff --git a/src/loading/_example/size/index.js b/src/loading/_example/size/index.js new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ b/src/loading/_example/size/index.js @@ -0,0 +1 @@ +Component({}); diff --git a/src/loading/_example/size/index.json b/src/loading/_example/size/index.json new file mode 100644 index 000000000..dc12aafa5 --- /dev/null +++ b/src/loading/_example/size/index.json @@ -0,0 +1,6 @@ +{ + "components": true, + "usingComponents": { + "t-loading": "tdesign-miniprogram/loading/loading" + } +} diff --git a/src/loading/_example/size/index.wxml b/src/loading/_example/size/index.wxml new file mode 100644 index 000000000..9d369481b --- /dev/null +++ b/src/loading/_example/size/index.wxml @@ -0,0 +1,5 @@ + + + + + diff --git a/src/loading/_example/size/index.wxss b/src/loading/_example/size/index.wxss new file mode 100644 index 000000000..f924c4c5e --- /dev/null +++ b/src/loading/_example/size/index.wxss @@ -0,0 +1,12 @@ +.text-m { + font-size: 28rpx; +} + +.text-l { + font-size: 32rpx; +} + +.loading-container-flex-column t-loading { + display: flex; + margin-top: 32rpx; +} diff --git a/src/loading/_example/status/index.js b/src/loading/_example/status/index.js new file mode 100644 index 000000000..c457b86e2 --- /dev/null +++ b/src/loading/_example/status/index.js @@ -0,0 +1,11 @@ +Component({ + data: { + isCheck: false, + }, + methods: { + switchChange() { + const { isCheck } = this.data; + this.setData({ isCheck: !isCheck }); + }, + }, +}); diff --git a/src/loading/_example/status/index.json b/src/loading/_example/status/index.json new file mode 100644 index 000000000..6de40e5dd --- /dev/null +++ b/src/loading/_example/status/index.json @@ -0,0 +1,7 @@ +{ + "components": true, + "usingComponents": { + "t-loading": "tdesign-miniprogram/loading/loading", + "t-switch": "tdesign-miniprogram/switch/switch" + } +} diff --git a/src/loading/_example/status/index.wxml b/src/loading/_example/status/index.wxml new file mode 100644 index 000000000..0c59fb23b --- /dev/null +++ b/src/loading/_example/status/index.wxml @@ -0,0 +1,5 @@ + + + {{isCheck?'请求发起，延迟显示loading加载':'请求结束，隐藏loading加载'}} + + diff --git a/src/loading/_example/status/index.wxss b/src/loading/_example/status/index.wxss new file mode 100644 index 000000000..63911a627 --- /dev/null +++ b/src/loading/_example/status/index.wxss @@ -0,0 +1,11 @@ +.loading-container-flex { + display: flex; + align-items: center; + font-size: 24rpx; + margin-bottom: 32rpx; +} + +.text-info { + margin-left: 24rpx; + color: rgba(0, 0, 0, 0.4); +} diff --git a/src/loading/_example/text/index.js b/src/loading/_example/text/index.js new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ b/src/loading/_example/text/index.js @@ -0,0 +1 @@ +Component({}); diff --git a/src/loading/_example/text/index.json b/src/loading/_example/text/index.json new file mode 100644 index 000000000..dc12aafa5 --- /dev/null +++ b/src/loading/_example/text/index.json @@ -0,0 +1,6 @@ +{ + "components": true, + "usingComponents": { + "t-loading": "tdesign-miniprogram/loading/loading" + } +} diff --git a/src/loading/_example/text/index.wxml b/src/loading/_example/text/index.wxml new file mode 100644 index 000000000..f7942e9de --- /dev/null +++ b/src/loading/_example/text/index.wxml @@ -0,0 +1 @@ + diff --git a/src/loading/_example/text/index.wxss b/src/loading/_example/text/index.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/src/loading/_example/vertical/index.js b/src/loading/_example/vertical/index.js new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ b/src/loading/_example/vertical/index.js @@ -0,0 +1 @@ +Component({}); diff --git a/src/loading/_example/vertical/index.json b/src/loading/_example/vertical/index.json new file mode 100644 index 000000000..dc12aafa5 --- /dev/null +++ b/src/loading/_example/vertical/index.json @@ -0,0 +1,6 @@ +{ + "components": true, + "usingComponents": { + "t-loading": "tdesign-miniprogram/loading/loading" + } +} diff --git a/src/loading/_example/vertical/index.wxml b/src/loading/_example/vertical/index.wxml new file mode 100644 index 000000000..18ea8a7de --- /dev/null +++ b/src/loading/_example/vertical/index.wxml @@ -0,0 +1 @@ + diff --git a/src/loading/_example/vertical/index.wxss b/src/loading/_example/vertical/index.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/src/loading/loading.less b/src/loading/loading.less index fcec5b9e4..4d7f95df6 100644 --- a/src/loading/loading.less +++ b/src/loading/loading.less @@ -6,6 +6,7 @@ display: inline-flex; align-items: center; justify-content: center; + font-size: 24rpx; &__spinner { position: relative;