Skip to content

Commit 960c3aa

Browse files
xxyan0205xxyan0205
committed
resolve conflicts
2 parents 9544ba3 + 8483c4c commit 960c3aa

24 files changed

Lines changed: 1452 additions & 21 deletions

‎build/component-init.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,7 @@ function launch() {
172172
"feedback",
173173
"form",
174174
"business",
175+
"gesture"
175176
],
176177
name: 'componentType',
177178
message: '组件类型',

‎build/template.exp‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ expect "组件中文名称，如：轻提示"
1414

1515
send "${chinese_name}\r"
1616

17-
expect "组件类型, 选项: basic feedback form business"
17+
expect "组件类型, 选项: basic feedback form business gesture"
1818

1919
send "${component_type}\r"
2020

‎components/_util/scroller.js‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,6 @@ export default class Scroller {
259259
if (left === this._scrollLeft && top === this._scrollTop) {
260260
animate = false
261261
}
262-
263262
// Publish new values
264263
if (!this._isTracking) {
265264
this._publish(left, top, zoom, animate)
@@ -501,6 +500,20 @@ export default class Scroller {
501500
// Slow down on the edges
502501
if (this.options.bouncing) {
503502
scrollTop += moveY / 2 * this.options.speedMultiplier
503+
// Support pull-to-refresh (only when only y is scrollable)
504+
if (!this._enableScrollX && this._refreshHeight != null) {
505+
if (!this._refreshActive && scrollTop <= -this._refreshHeight) {
506+
this._refreshActive = true
507+
if (this._refreshActivate) {
508+
this._refreshActivate()
509+
}
510+
} else if (this._refreshActive && scrollTop > -this._refreshHeight) {
511+
this._refreshActive = false
512+
if (this._refreshDeactivate) {
513+
this._refreshDeactivate()
514+
}
515+
}
516+
}
504517
} else if (scrollTop > maxScrollTop) {
505518
scrollTop = maxScrollTop
506519
} else {
@@ -709,14 +722,16 @@ export default class Scroller {
709722
}
710723
}
711724

712-
// When continuing based on previous animation we choose an ease-out animation instead of ease-in-out
713-
this._isAnimating = Animate.start(
714-
step,
715-
verify,
716-
completed,
717-
this.options.animationDuration,
718-
wasAnimating ? easeOutCubic : easeInOutCubic,
719-
)
725+
Animate.requestAnimationFrame(() => {
726+
// When continuing based on previous animation we choose an ease-out animation instead of ease-in-out
727+
this._isAnimating = Animate.start(
728+
step,
729+
verify,
730+
completed,
731+
this.options.animationDuration,
732+
wasAnimating ? easeOutCubic : easeInOutCubic,
733+
)
734+
})
720735
} else {
721736
this._scheduledLeft = this._scrollLeft = left
722737
this._scheduledTop = this._scrollTop = top
@@ -773,7 +788,7 @@ export default class Scroller {
773788
}
774789

775790
// How much velocity is required to keep the deceleration running
776-
const minVelocityToKeepDecelerating = this.options.snapping ? 4 : 0.001
791+
const minVelocityToKeepDecelerating = this.options.snapping ? 4 : 0.05
777792

778793
// Detect whether it's still worth to continue animating steps
779794
// If we are already slow enough to not being user perceivable anymore, we stop the whole process here.

‎components/activity-indicator/roller.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
:style="circleStyle"
2424
>
2525
<animateTransform
26+
v-if="process === undefined"
2627
:dur="`${duration}s`"
2728
:values="`0 ${viewBoxSize/2} ${viewBoxSize/2};360 ${viewBoxSize/2} ${viewBoxSize/2}`"
2829
attributeName="transform"
@@ -105,11 +106,6 @@
105106
106107
methods: {
107108
$_insertKeyframes() {
108-
/* istanbul ignore if */
109-
if (this.process !== undefined) {
110-
// No need to add animation
111-
return
112-
}
113109
const id = this.id
114110
const keyframes = `from{stroke-dasharray:0 ${this.circlePerimeter};}to{stroke-dasharray:${this
115111
.circlePerimeter} 0;}`

‎components/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@ import ActivityIndicator from './activity-indicator'
4545
import CheckGroup from './check-group'
4646
import CheckList from './check-list'
4747
import CheckBox from './check-box'
48+
import ScrollView from './scroll-view'
49+
import ScrollViewRefresh from './scroll-view-refresh'
50+
import ScrollViewMore from './scroll-view-more'
4851
/* @init<%import ${componentNameUpper} from './${componentName}'%> */
4952

5053
// 全量引入提醒
@@ -100,6 +103,9 @@ export const components = {
100103
CheckGroup,
101104
CheckList,
102105
CheckBox,
106+
ScrollView,
107+
ScrollViewRefresh,
108+
ScrollViewMore,
103109
/* @init<%${componentNameUpper},%> */
104110
}
105111

@@ -170,6 +176,9 @@ export {
170176
CheckGroup,
171177
CheckList,
172178
CheckBox,
179+
ScrollView,
180+
ScrollViewRefresh,
181+
ScrollViewMore,
173182
/* @init<%${componentNameUpper},%> */
174183
}
175184

‎components/scroll-view-more/index.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<script>import ScrollViewMore from '../scroll-view/more'
2+
export default ScrollViewMore
3+
</script>

‎components/scroll-view-refresh/index.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<script>import ScrollViewRefresh from '../scroll-view/refresh'
2+
export default ScrollViewRefresh
3+
</script>

‎components/scroll-view/README.en-US.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
title: ScrollView
3+
preview: https://didi.github.io/mand-mobile/examples/#/scroll-view
4+
---
5+
6+
Used to simulate native scrolling areas and support pull-down refresh and load more <sup class="version-after">1.5.0+</sup>
7+
8+
### Import
9+
10+
```javascript
11+
import { ScrollView, ScrollViewRefresh, ScrollViewMore } from 'mand-mobile'
12+
13+
Vue.component(ScrollView.name, ScrollView)
14+
```
15+
16+
### Instruction
17+
18+
`ScrollViewRefresh` is a pull-down refresh component built into the component library for visual display only. It needs to be used in the slot <a href="javascript:jumpAnchor('refresh')">refresh</a>. The pull-down refresh component can also be customized.
19+
20+
`ScrollViewMore` load-more component built into the component library for visual display only. It needs to be used in slot <a href="javascript:jumpAnchor('more')">more</a>. The load-more component can also be customized.
21+
22+
### Code Examples
23+
<!-- DEMO -->
24+
25+
### API
26+
27+
#### ScrollView Props
28+
|Props | Description | Type | Default | Note |
29+
|----|-----|------|------|------|
30+
|scrolling-x | horizontal scrolling | Boolean | `true` | -|
31+
|scrolling-y | vertical scrolling | Boolean | `true` | -|
32+
|bouncing | - | Boolean | `true` | -|
33+
|endReachedThreshold | threshold for emitting `endReached`. | Number | 0 | unit `px` |
34+
35+
#### ScrollViewRefresh Props
36+
|Props | Description | Type | Default | Note |
37+
|----|-----|------|------|------|
38+
|scroll-top | distance from top | Number | 0 | unit `px` |
39+
|is-refresh-active | release refreshable state | Boolean | `false` | - |
40+
|is-refreshing | refreshing state | Boolean | `false` | - |
41+
|refresh-text | - | String | `下拉刷新` | - |
42+
|refresh-active-text | release refreshable text | String | `释放刷新` | - |
43+
|refreshing-text | refreshing text | String | `刷新中...` | - |
44+
45+
#### ScrollViewMore Props
46+
|Props | Description | Type | Default | Note |
47+
|----|-----|------|------|------|
48+
|is-finished | all loaded | Boolean | `false` | - |
49+
|loading-text | loading text | String | `更多加载中...` | - |
50+
|finished-text | loaded text | String | `全部已加载` | - |
51+
52+
#### ScrollView Slots
53+
54+
##### default
55+
Scrolling area content slot. When the content changes, you need to call `reflowScroller` to reset the scroll area. Refer to <a href="javascript:jumpAnchor('reflowScroller')">reflowScroller</a>
56+
57+
##### refresh
58+
Pull-down refresh component slot, you can use `slot-scoped` to get the relevant scrolling status as follows (the scrolling state can also be dynamically set by event when the `slot-scoped` is not compatible)
59+
60+
```html
61+
<md-scroll-view-refresh
62+
slot="refresh"
63+
slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
64+
:scroll-top="scrollTop"
65+
:is-refreshing="isRefreshing"
66+
:is-refresh-active="isRefreshActive"
67+
></md-scroll-view-refresh>
68+
```
69+
##### more
70+
load-more component slot
71+
72+
#### ScrollView Methods
73+
74+
##### reflowScroller()
75+
Reset the scroll area, which needs to be called after the content in the general scroll area changes.
76+
77+
##### scrollTo(left, top, animate = false)
78+
Scroll to the specified location
79+
80+
|Parameters | Description | Type|
81+
|----|-----|------|
82+
|left|distance from left|Number|
83+
|top|distance from top|Number|
84+
|animate|using animation|Boolean|
85+
86+
##### triggerRefresh()
87+
-
88+
89+
##### finishRefresh()
90+
-
91+
92+
##### finishLoadMore()
93+
-
94+
95+
#### ScrollView Events
96+
97+
##### @scroll({scrollLeft, scrollTop})
98+
Scrolling event
99+
100+
|Props | Description | Type|
101+
|----|-----|------|
102+
|scrollLeft|distance from left|Number|
103+
|scrollTop|distance from top|Number|
104+
105+
##### @refreshActive()
106+
Release refreshable event
107+
108+
##### @refreshing()
109+
Refreshing event
110+
111+
##### @endReached()
112+
Reached end event

‎components/scroll-view/README.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
title: ScrollView 滚动区域/下拉刷新
3+
preview: https://didi.github.io/mand-mobile/examples/#/scroll-view
4+
---
5+
6+
用于模拟原生的滚动区域，并支持下拉刷新和加载更多 <sup class="version-after">1.5.0+</sup>
7+
8+
### 引入
9+
10+
```javascript
11+
import { ScrollView, ScrollViewRefresh, ScrollViewMore } from 'mand-mobile'
12+
13+
Vue.component(ScrollView.name, ScrollView)
14+
```
15+
16+
### 使用指南
17+
18+
`ScrollViewRefresh`为组件库内置的下拉刷新组件，仅用于作为视觉展示，需在插槽<a href="javascript:jumpAnchor('refresh')">refresh</a>中使用，下拉刷新组件也可自定义
19+
20+
`ScrollViewMore`为组件库内置的加载更多组件，仅用于作为视觉展示，需在插槽<a href="javascript:jumpAnchor('more')">more</a>中使用，加载更多组件也可自定义
21+
22+
### 代码演示
23+
<!-- DEMO -->
24+
25+
### API
26+
27+
#### ScrollView Props
28+
|属性 | 说明 | 类型 | 默认值 | 备注|
29+
|----|-----|------|------|------|
30+
|scrolling-x | 水平滚动 | Boolean | `true` | -|
31+
|scrolling-y | 垂直滚动 | Boolean | `true` | -|
32+
|bouncing | 可回弹 | Boolean | `true` | -|
33+
|endReachedThreshold | 触发到达底部的提前量 | Number | 0 | 单位`px` |
34+
35+
#### ScrollViewRefresh Props
36+
|属性 | 说明 | 类型 | 默认值 | 备注|
37+
|----|-----|------|------|------|
38+
|scroll-top | 距离顶部距离 | Number | 0 | 单位`px` |
39+
|is-refresh-active | 释放可刷新状态 | Boolean | `false` | - |
40+
|is-refreshing | 刷新中状态 | Boolean | `false` | - |
41+
|refresh-text | 待刷新文案 | String | `下拉刷新` | - |
42+
|refresh-active-text | 释放可刷新文案 | String | `释放刷新` | - |
43+
|refreshing-text | 刷新中文案 | String | `刷新中...` | - |
44+
45+
#### ScrollViewMore Props
46+
|属性 | 说明 | 类型 | 默认值 | 备注|
47+
|----|-----|------|------|------|
48+
|is-finished | 全部已加载 | Boolean | `false` | - |
49+
|loading-text | 加载中文案 | String | `更多加载中...` | - |
50+
|finished-text | 全部已加载文案 | String | `全部已加载` | - |
51+
52+
#### ScrollView Slots
53+
54+
##### default
55+
滚动区域内容插槽，当内容发生变化是，需要调用`reflowScroller`重置滚动区域，参考<a href="javascript:jumpAnchor('reflowScroller')">reflowScroller</a>
56+
57+
##### refresh
58+
下拉刷新组件插槽，可如下使用`slot-scoped`获取相关滚动状态（不兼容`slot-scoped`时滚动状态也可通过事件中动态设置）
59+
60+
```html
61+
<md-scroll-view-refresh
62+
slot="refresh"
63+
slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
64+
:scroll-top="scrollTop"
65+
:is-refreshing="isRefreshing"
66+
:is-refresh-active="isRefreshActive"
67+
></md-scroll-view-refresh>
68+
```
69+
##### more
70+
加载更多组件插槽
71+
72+
#### ScrollView Methods
73+
74+
##### reflowScroller()
75+
重置滚动区域，一般滚动区域中的内容发生变化之后需调用
76+
77+
##### scrollTo(left, top, animate = false)
78+
滚动至指定位置
79+
80+
|参数 | 说明 | 类型|
81+
|----|-----|------|
82+
|left|距左侧距离|Number|
83+
|top|距顶部距离|Number|
84+
|animate|使用动画|Boolean|
85+
86+
##### triggerRefresh()
87+
触发下拉刷新
88+
89+
##### finishRefresh()
90+
停止下拉刷新
91+
92+
##### finishLoadMore()
93+
停止加载更多
94+
95+
#### ScrollView Events
96+
97+
##### @scroll({scrollLeft, scrollTop})
98+
滚动事件
99+
100+
|属性 | 说明 | 类型|
101+
|----|-----|------|
102+
|scrollLeft|距左侧距离|Number|
103+
|scrollTop|距顶部距离|Number|
104+
105+
##### @refreshActive()
106+
释放可刷新事件
107+
108+
##### @refreshing()
109+
刷新中事件
110+
111+
##### @endReached()
112+
滚动触底事件

0 commit comments

Comments
 (0)