diff --git a/.eslintrc b/.eslintrc
index cb76805d2..6c0122394 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -4,6 +4,7 @@
"no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
"quotes": [2, "single"],
"react/self-closing-comp": "off",
+ "semi": [2,"never"],
"react/jsx-closing-bracket-location": [
"error",
{
diff --git a/src/app.scss b/src/app.scss
index 98dd396ff..d2b56de04 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,3 +1,21 @@
-#app{
- background-color: #f8f8f8;
+#app {
+ background-color: #f8f8f8;
}
+
+// 实例模板
+.example {
+ padding: 20px;
+ margin-bottom: 50px;
+ &:not(:first-child) {
+ border-top: 40px solid #f5f5f5;
+ }
+ &__header {
+ padding-bottom: 10px;
+ border-bottom: 1px solid rgba($color: #E5E5E5, $alpha: 1);
+ &-title {
+ color: #999;
+ font-size: 28px;
+ }
+ }
+ &__body{}
+}
\ No newline at end of file
diff --git a/src/components/activity-indicator/index.js b/src/components/activity-indicator/index.js
index f29f25782..c2d67cc49 100644
--- a/src/components/activity-indicator/index.js
+++ b/src/components/activity-indicator/index.js
@@ -1,47 +1,54 @@
-import Taro from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
-import './index.scss'
+import './index.scss';
export default class ActivityIndicator extends Taro.Component {
constructor() {
- super(...arguments)
+ super(...arguments);
this.state = {
views: new Array(12).fill()
- }
+ };
}
render() {
- const { views } = this.state
- const { color, size = 100, mode, text } = this.props
- const realSize = size / 2
- const scaleSize = size / 200
+ const { views } = this.state;
+ const { color, size , mode , content } = this.props;
+ const realSize = size / 2;
+ const scaleSize = size / 200;
- const rootStyle = {
+ const indicatorStyle = {
width: +size,
height: +size,
transform: `translate(-${realSize}px, -${realSize}px) scale(${scaleSize}) translate(${realSize}px,${realSize}px)`
- }
+ };
+
const style = {
background: color
- }
+ };
+
+ const rootClassName = {
+ 'at-activity-indicator': true,
+ 'at-activity-indicator--center': mode == 'center'
+ };
- const rootClassName = ['at-activity-indicator__body', `at-activity-indicator__body--${mode}`]
return (
-
-
+
+
{views.map((item, index) => {
return (
- )
+ );
})}
- {text}
+ {content && (
+ {content}
+ )}
- )
+ );
}
}
diff --git a/src/components/activity-indicator/index.scss b/src/components/activity-indicator/index.scss
index 4ddeeec6b..fd7670f37 100644
--- a/src/components/activity-indicator/index.scss
+++ b/src/components/activity-indicator/index.scss
@@ -1,4 +1,5 @@
/*postcss-pxtransform disable*/
+@import '../../style/mixins';
@keyframes lds-spinner {
0% {
@@ -20,12 +21,16 @@
.at-activity-indicator {
display: inline-block;
+
+ &--center{
+ @include absolute-center;
+ }
+
&__body {
- width: 200px;
- height: 200px;
+ width: 100px;
+ height: 100px;
position: relative;
- display: inline-block;
- transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
+ transform: translate(-50px, -50px) scale(.5) translate(50px, 50px);
&-item {
left: 94px;
@@ -45,4 +50,8 @@
}
}
}
+ &__content{
+ text-align: center;
+ font-size: 16px;
+ }
}
diff --git a/src/components/progress/index.js b/src/components/progress/index.js
new file mode 100644
index 000000000..bb84791eb
--- /dev/null
+++ b/src/components/progress/index.js
@@ -0,0 +1,14 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import './index.scss'
+
+export default class Progress extends Taro.Component {
+ constructor() {
+ super(...arguments)
+ }
+
+ render() {
+ return 11
+ }
+}
diff --git a/src/components/progress/index.scss b/src/components/progress/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/action/activity-indicator/index.js b/src/pages/action/activity-indicator/index.js
index dc7c7cec6..f42480ee0 100644
--- a/src/pages/action/activity-indicator/index.js
+++ b/src/pages/action/activity-indicator/index.js
@@ -44,7 +44,7 @@ export default class ActivityIndicatorPage extends Taro.Component {
自定义文字
-
+
@@ -54,6 +54,9 @@ export default class ActivityIndicatorPage extends Taro.Component {
+
+
+
)
diff --git a/src/pages/action/activity-indicator/index.scss b/src/pages/action/activity-indicator/index.scss
index 29c2bbc67..c1534b31c 100644
--- a/src/pages/action/activity-indicator/index.scss
+++ b/src/pages/action/activity-indicator/index.scss
@@ -1,29 +1,12 @@
@import "../../../style/variables";
-
.activity-indicator__page {
- .example {
- padding: 20px;
- margin-bottom: 50px;
- &:not(:first-child) {
- border-top: 20PX solid #f5f5f5;
+ .example__body {
+ &--list {}
+ &--center {
+ height: 375px;
+ position: relative;
+ background-color: #f8f8f8;
+ margin-bottom: 20px;
+ }
}
- &__header {
- padding-bottom: 10px;
- margin-bottom: 30px;
- border-bottom: 1PX solid rgba($color: #E5E5E5, $alpha: 1);
- &-title {
- color: #999;
- font-size: 14PX;
- }
- }
- &__body {
- &--list {
- }
- &--center {
- height: 375px;
- position: relative;
- background-color: #f8f8f8;
- }
- }
- }
-}
+}
\ No newline at end of file
diff --git a/src/pages/action/progress/index.js b/src/pages/action/progress/index.js
index 80bf1756d..79967de72 100644
--- a/src/pages/action/progress/index.js
+++ b/src/pages/action/progress/index.js
@@ -1,9 +1,11 @@
import Taro from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { View,Text } from '@tarojs/components'
+
+import Progress from '../../../components/progress/index'
import './index.scss'
-export default class Index extends Taro.Component {
+export default class ProgressPage extends Taro.Component {
config = {
navigationBarTitleText: 'Taro UI'
}
@@ -16,13 +18,26 @@ export default class Index extends Taro.Component {
render() {
return (
-
-
-
- Taro UI Modal
- Alert Modal
- Confirm Modal
- Custom Modal
+
+
+
+ 任意尺寸
+
+
+
+
+
+
+
+
+
+ 任意尺寸
+
+
+
+
+
+
)
diff --git a/src/style/mixins.scss b/src/style/mixins.scss
index b77b55cd5..39041e180 100644
--- a/src/style/mixins.scss
+++ b/src/style/mixins.scss
@@ -1,3 +1,6 @@
-@mixin fontSize($num) {
- font-size: $num;
-}
\ No newline at end of file
+@mixin absolute-center {
+ top: 50%;
+ left: 50%;
+ position: absolute;
+ transform: translate(-50%,-50%);
+}