Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: picker data add disabled option #453

Open
wants to merge 1,045 commits into
base: dev
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
1045 commits
Select commit Hold shift + click to select a range
f55a5f1
build: package
dolymood Jul 25, 2018
8d0b5c9
docs(tab-bar): modify tab-bar docs
theniceangel Jul 30, 2018
3556149
build: docs
theniceangel Jul 30, 2018
4a89d1d
fix(date-picker): min update #256
AmyFoxFN Jul 31, 2018
53502df
test(date-picker): updateProps
AmyFoxFN Jul 31, 2018
736d1b9
chore: update verison
AmyFoxFN Jul 31, 2018
7822422
build: package
AmyFoxFN Jul 31, 2018
49e7f2c
build: docs
AmyFoxFN Jul 31, 2018
6034252
fix(image-preview): image-preview boundary check condition
dolymood Aug 3, 2018
8044a93
Merge branch 'dev' of github.com:didi/cube-ui into dev
dolymood Aug 3, 2018
846977d
feat(slide): support refreshResetCurrent prop
dolymood Aug 3, 2018
def0bf0
test(slide): refreshResetCurrent test
dolymood Aug 3, 2018
901527b
docs(slide): add refreshResetCurrent doc
dolymood Aug 3, 2018
dc10f1b
chore(package.json): 1.10.10
dolymood Aug 3, 2018
102a70d
build: package
dolymood Aug 3, 2018
44f2a28
build: docs
dolymood Aug 3, 2018
7527c2f
refactor(action-sheet): remove unless touchmove
dolymood Aug 8, 2018
4560ab7
fix(popup): add touchmove.prevent for disable page scrolling
dolymood Aug 8, 2018
0096ff9
chore(package.json): add sideEffects false config
dolymood Aug 10, 2018
808b320
docs(scroll): add more API docs
dolymood Aug 10, 2018
b351742
fix(radio): number value 0 should be 'true' value
dolymood Aug 20, 2018
f6568a5
test(radio): test number value 0
dolymood Aug 20, 2018
2c0c947
docs(slide): modify English slide
theniceangel Aug 20, 2018
ed9870a
fix(slide): modify style
theniceangel Aug 20, 2018
e0f3a54
feat(image-preview): support z-index prop
dolymood Aug 20, 2018
61f8219
feat(validator): support modelKey prop
dolymood Aug 20, 2018
7742c1b
test(validator): add modelKey
dolymood Aug 20, 2018
2f481d6
docs(slide): modify docs
theniceangel Aug 20, 2018
179de14
docs(popups): add zIndex prop desc
jiangxinxinxin Aug 20, 2018
770ea6a
fix(create-api): multi api watchers should be saved to an array
dolymood Aug 20, 2018
f8cc411
refactor(validator): add targetModel computed value for opti
dolymood Aug 21, 2018
ea6878c
Merge branch 'dev' of github.com:didi/cube-ui into dev
dolymood Aug 21, 2018
e60ee69
feat(scroll-nav): support dynamic label & title
dolymood Aug 21, 2018
69bcf99
refactor(validator): model value watch use sync
dolymood Aug 21, 2018
ba64199
fix(form): item validator validate sync
dolymood Aug 21, 2018
f9fc68d
test(form): add trigger blur sync test
dolymood Aug 21, 2018
8da8caa
chore(package.json): remove sideEffects
dolymood Aug 21, 2018
ef91b40
fix(slide): update currentIndex in scrollEnd handler
dolymood Aug 21, 2018
c265c04
docs(scroll-nav-bar): add HTML support
dolymood Aug 21, 2018
bef09e6
docs(scroll-nav): add HTML support
dolymood Aug 21, 2018
4d3dc3b
feat(validator): watch rules change to validate
dolymood Aug 21, 2018
266d2c9
fix(validator): number len msg should be length, not equal
dolymood Aug 21, 2018
2ede963
chore(package.json): 1.10.11
dolymood Aug 21, 2018
e0d83fe
build: package
dolymood Aug 21, 2018
8776765
build: docs
dolymood Aug 21, 2018
5d1d0d8
docs(image-preview): zIndex prop version
dolymood Aug 21, 2018
b47316d
build: docs
dolymood Aug 21, 2018
01eb0d0
fix(create-api): do not cancel watchers on create
dolymood Aug 21, 2018
a0b7cc9
chore(package.json): 1.10.12
dolymood Aug 21, 2018
eb02e08
build: package
dolymood Aug 21, 2018
a49d061
fix(create-api): oldOwnerInstance.$off err
dolymood Aug 22, 2018
0ec1ec8
chore(package.json): 1.10.13
dolymood Aug 22, 2018
61483f5
build: package
dolymood Aug 22, 2018
f5e2a96
docs(post-compile): add postCompile true condition
dolymood Aug 26, 2018
310c3a2
fix(slide): container overflow should not visible
dolymood Aug 26, 2018
6c02da0
docs(quick-start): add vue-cli@3 doc
dolymood Aug 27, 2018
f737025
docs(create-api): add Vue.use case
dolymood Aug 27, 2018
e8d7b34
build: docs
dolymood Aug 27, 2018
0a1d63e
chore(picker): optimize array handle
AmyFoxFN Aug 28, 2018
539c8d1
chore(picker): remove needless code
AmyFoxFN Aug 30, 2018
7b7fc44
docs: picker
AmyFoxFN Aug 29, 2018
f5c9359
build: docs
AmyFoxFN Aug 30, 2018
88a0774
fix(tab-bar): fix tab-bar's bug in async scene
theniceangel Aug 31, 2018
50d347b
chore(package.json): to be published
theniceangel Aug 31, 2018
f0d64b8
build: package
theniceangel Aug 31, 2018
224ee92
chore(image-preview): add an example of $props
theniceangel Sep 20, 2018
7f04877
docs(image-preview): optimize docs
theniceangel Sep 20, 2018
3f42a2d
build: docs
theniceangel Sep 20, 2018
f68600c
fix(image-preview): small width image need device width
dolymood Sep 21, 2018
f5e3d0d
refactor(tab-bar): watch resize event
theniceangel Sep 21, 2018
9e44f23
test(image-preview): get scroll.enabled in nextTick
theniceangel Sep 21, 2018
d94509e
docs(cascade-picker): optimize cascade-picker docs
theniceangel Sep 22, 2018
0c5cb98
build: docs
theniceangel Sep 22, 2018
2ebf28e
chore: update scroll docs
tank0317 Sep 23, 2018
fb82e16
chore(scroll): update scroll example
tank0317 Sep 23, 2018
0639c5d
chore(package.json): browserlist clean
dolymood Sep 25, 2018
4d82d50
fix(browserslist): iOS >= 8
AmyFoxFN Sep 26, 2018
b58b6f0
Merge pull request #320 from didi/update-scroll-docs
theniceangel Sep 26, 2018
dc3b91d
build: docs
theniceangel Sep 26, 2018
53c8e08
chore: package-lock
AmyFoxFN Sep 27, 2018
d817d29
chore: version
AmyFoxFN Sep 27, 2018
94a81db
build: package
AmyFoxFN Sep 27, 2018
d654bd0
docs(image-preview): adding missing part
theniceangel Sep 27, 2018
6e6bb62
build: docs
theniceangel Sep 27, 2018
b891aa2
chore(tab-bar): hyphenate a camelCase props
theniceangel Sep 27, 2018
9731e4d
build: docs
theniceangel Sep 27, 2018
8d6d581
docs(tab-bar): camelized props need to be hyphenated
theniceangel Sep 27, 2018
fddf299
build: docs
theniceangel Sep 27, 2018
5fafac1
docs(tab-bar): optimize docs of tab-bar
theniceangel Sep 27, 2018
61db031
build: docs
theniceangel Sep 27, 2018
2b6ff24
Merge branch 'dev' of github.com:didi/cube-ui into dev
dolymood Sep 30, 2018
b381ad3
chore(build): support cube.xxx with umd in modules target
dolymood Sep 30, 2018
ff803a8
chore(package.json): update better-scroll to 1.12.6
dolymood Oct 8, 2018
d2a72d5
fix(image-preview): over height image should be scrolling always
dolymood Oct 8, 2018
4de65cc
docs(image-preview): add preventDefault prop
dolymood Oct 8, 2018
00bf4c5
chore(package.json): version 1.10.16
dolymood Oct 8, 2018
8bb28ce
build: package
dolymood Oct 8, 2018
d14a772
build: docs
dolymood Oct 8, 2018
0ebf82f
chore(package.json): browserlist no ie option
dolymood Oct 9, 2018
cbd038a
fix(date-picker): change event
AmyFoxFN Oct 10, 2018
fc5f373
Merge branch 'dev' of github.com:didi/cube-ui into dev
dolymood Oct 10, 2018
9027e6a
Feat nested scroll (#245)
tank0317 Oct 10, 2018
2560513
refactor(create-api): add vue-create-api and replace (#303)
tank0317 Oct 10, 2018
2fa16f5
Feat toast no icon (#317)
dolymood Oct 10, 2018
a73db2d
Feat input support blur hidden clear btn (#276)
dolymood Oct 10, 2018
32a594d
Feat upload support dynamic target, headers, data (#277)
dolymood Oct 10, 2018
95d9cf7
Feat Swipe handle own active logic (#325)
dolymood Oct 10, 2018
c64ad2b
refactor(button): opt button: only outline & disabled need border (#315)
dolymood Oct 10, 2018
1ca38eb
Feat dialog prompt (#327)
dolymood Oct 10, 2018
51491c0
Feat Checker (#326)
chrislala Oct 10, 2018
a795e1c
Feat checkbox group min max (#328)
dolymood Oct 11, 2018
65844ac
Merge branch 'dev' of github.com:didi/cube-ui into dev
dolymood Oct 11, 2018
ff20553
feat(locale): locale support
theniceangel Oct 11, 2018
a01f5ec
Merge branch 'dev' of github.com:didi/cube-ui into dev
dolymood Oct 11, 2018
0e24f30
feat(upload): always handle response & responseHeaders
dolymood Oct 11, 2018
8a4a05c
chore(package.json): 1.11.0
dolymood Oct 11, 2018
8a6a2a3
docs(singleton): about create-api singleton changes
dolymood Oct 11, 2018
7ee0713
chore(example): validator use locale set to en-US
dolymood Oct 11, 2018
4cd186d
docs(form): add submit event detail - prevent default behaviour
dolymood Oct 11, 2018
2d561e7
build: package
dolymood Oct 12, 2018
7386de2
build: docs
dolymood Oct 12, 2018
d68c61c
docs(i18n): add version
dolymood Oct 12, 2018
5005799
build: docs
dolymood Oct 12, 2018
9998403
docs(quick-start): add checker & locale entry
dolymood Oct 12, 2018
736c0c0
docs(scroll): version
dolymood Oct 12, 2018
7676bc4
build: docs
dolymood Oct 12, 2018
02177f3
chore(scroll): fix example bug
tank0317 Oct 15, 2018
1c221c2
Merge pull request #333 from didi/dev
tank0317 Oct 15, 2018
8eadaa8
build: docs
tank0317 Oct 15, 2018
1cba50f
fix(validator): remove findMessage
theniceangel Oct 15, 2018
fb4a03f
chore(upgrade): update to v1.11.1
theniceangel Oct 15, 2018
2e3ab32
build: package
theniceangel Oct 15, 2018
064d360
chore(example): input spell error
dolymood Oct 17, 2018
320f372
build: docs
dolymood Oct 17, 2018
72cafe7
docs(swipe): add 1.11 version diff
dolymood Oct 18, 2018
61a4786
build: docs
dolymood Oct 18, 2018
601b2ee
Fix nest scrolls bug (#340)
tank0317 Oct 21, 2018
476538c
chore(package.json): 1.11.2
dolymood Oct 21, 2018
b8e26d6
build: package
dolymood Oct 21, 2018
6b52207
build: docs
dolymood Oct 21, 2018
c1f4ce3
chore(example): checkbox add click demo
dolymood Oct 23, 2018
7c838ef
docs(checkbox): add click demo doc
dolymood Oct 23, 2018
e5056a7
build: docs
dolymood Oct 23, 2018
fd82368
feat(textarea): support autoExpand prop to control init state
dolymood Nov 2, 2018
b2a5e03
test(textarea): add autoExpand prop test
dolymood Nov 2, 2018
6a5f3ff
docs(textarea): add autoExpand prop doc
dolymood Nov 2, 2018
c332862
Fix scrolls nest mode (#345)
tank0317 Nov 2, 2018
fcfbc30
Feat recycle list (#344)
theniceangel Nov 7, 2018
55a1734
refactor(input): placeholder color set to normal
dolymood Nov 7, 2018
3b02a6d
refactor(textarea): placeholder color specificity to normal
dolymood Nov 7, 2018
0241801
chore(package.json): 1.12.0
dolymood Nov 7, 2018
fb46c5e
docs(scroll): nest mode required version 1.12
dolymood Nov 7, 2018
fa40c43
docs(recycle-list): add version
dolymood Nov 7, 2018
f532aa1
chore(types): add recycle-list component
dolymood Nov 7, 2018
38fc301
build: package
dolymood Nov 7, 2018
3fefd10
build: docs
dolymood Nov 7, 2018
d6e21f5
fix(recycle-list): change warning to warn
theniceangel Nov 8, 2018
2336640
chore(package.json): 1.12.1
dolymood Nov 8, 2018
a0fe79d
build: package
dolymood Nov 8, 2018
40ec2db
feat(form): submit method add skipValidate param
dolymood Nov 8, 2018
8709c0b
docs(form): add submit skitValidate param doc
dolymood Nov 8, 2018
4449009
chore(package.json): 1.12.2
dolymood Nov 8, 2018
900f393
docs(form): add version required
dolymood Nov 8, 2018
4ddb808
build: package
dolymood Nov 8, 2018
020c51b
build: docs
dolymood Nov 8, 2018
5538af1
fix(swipe): should update activeIndex when remove item
dolymood Nov 13, 2018
54399f1
chore(package.json): 1.12.3
dolymood Nov 13, 2018
d0215e4
build: package
dolymood Nov 13, 2018
45d08a5
docs(nav): add video tutorial
dolymood Nov 15, 2018
71d5d8b
build: docs
dolymood Nov 15, 2018
d45d98c
fix(example): fix page header invisible
dolymood Nov 15, 2018
7e05559
fix(recycle-list): can not scroll on iOS
dolymood Nov 15, 2018
b69f8ff
refactor(example): recycle list style
dolymood Nov 15, 2018
32991ff
chore(package.json): 1.12.4
dolymood Nov 15, 2018
79a454e
build: package
dolymood Nov 15, 2018
c860c8c
build: docs
dolymood Nov 15, 2018
99fd215
feat(form): add checker item
dolymood Nov 20, 2018
ff0838f
feat(tab-bar): support value prop
dolymood Nov 20, 2018
36c8d90
feat(tab-panels): support value prop for tab-panel
dolymood Nov 20, 2018
3ebc731
docs(tab-bar): add value prop doc
dolymood Nov 20, 2018
9241c34
feat(locale): support auto get Vue value
dolymood Nov 20, 2018
e24543d
chore(package.json): 1.12.5
dolymood Nov 20, 2018
5fdf90e
build: package
dolymood Nov 20, 2018
427cba9
build: docs
dolymood Nov 20, 2018
eac73a2
docs(quick-start): add video
dolymood Nov 23, 2018
533f387
build: docs
dolymood Nov 23, 2018
6a67fe4
Feat(TimePicket): support min & max
AmyFoxFN Dec 5, 2018
a0b7f78
chore: update version
AmyFoxFN Dec 5, 2018
7943b46
build: package
AmyFoxFN Dec 5, 2018
53f12f6
build: docs
AmyFoxFN Dec 5, 2018
870a302
Fix v-model typo (#369)
Leecason Dec 11, 2018
54fb5e2
chore: update scroll example's img (#372)
tank0317 Dec 13, 2018
a6f53c7
build: docs
dolymood Dec 13, 2018
8478e72
chore(package.json): better-scroll version lock
dolymood Jan 3, 2019
9f82fe1
chore(package.json): 1.12.7
dolymood Jan 3, 2019
e65a03e
build: package
dolymood Jan 3, 2019
166adef
build: docs
dolymood Jan 3, 2019
03fcdb9
fix(image-preview): zoom image on iOS will be blurred
dolymood Jan 7, 2019
7acd801
chore(package.json): 1.12.8
dolymood Jan 7, 2019
aacf098
build: package
dolymood Jan 7, 2019
19b4c53
chore(docs): remove Video Tutorial
theniceangel Jan 8, 2019
2ce3d28
build: docs
theniceangel Jan 8, 2019
b45c51c
fix(slide): goToPage direction (#384)
tank0317 Jan 22, 2019
facec89
chore(slide): add vertical unit test case
Jan 22, 2019
aabbb43
chore(package.json): 1.12.9
dolymood Jan 22, 2019
29620a6
build: package
dolymood Jan 22, 2019
7a8dd25
fix(recycle-list): check promise when mounted
dolymood Jan 31, 2019
d4856f2
feat(input): add blur & focus api
dolymood Jan 31, 2019
f2eb398
test(input): focus & blur api
dolymood Jan 31, 2019
40254f3
chore(package.json): 1.12.10
dolymood Jan 31, 2019
65bdb00
build: package
dolymood Jan 31, 2019
73a4b24
docs(input): add focus & blur api doc
dolymood Jan 31, 2019
e31a573
build: docs
dolymood Jan 31, 2019
f6d4cf6
sticky-ele组件导出错误 (#409)
chenfengjw163 Feb 13, 2019
c528eea
fix(radio): radio group support v-model when using group
dolymood Feb 14, 2019
0389bfc
chore(demo): radio group demo
dolymood Feb 14, 2019
4d2b9af
Recycle list fixbug (#410)
theniceangel Feb 15, 2019
ff4cc98
chore(package.json): 1.12.11
dolymood Feb 15, 2019
bd48d16
build: package
dolymood Feb 15, 2019
e89a5a5
build: docs
dolymood Feb 15, 2019
e9537e4
Recycle list add api (#417)
theniceangel Feb 27, 2019
1227d7a
fix(Slide): fix maxScrollX/Y caculating error in nested Slide (#418)
tank0317 Mar 3, 2019
2c8900a
chore(types): add popup show, hide and remove declare
dolymood Mar 11, 2019
eb6848e
chore(package.json): 1.12.12
dolymood Mar 11, 2019
e5ea3ef
build: package
dolymood Mar 11, 2019
f443001
build: docs
dolymood Mar 11, 2019
bb94f54
chore(types): ts type declare err
dolymood Mar 11, 2019
c104441
fix(scroll-nav-bar): inline-block element should have vertical-align top
dolymood Mar 11, 2019
15226b6
fix(form): should sync validator value when submit
dolymood Mar 11, 2019
3b7f513
refactor(form): opti comment
dolymood Mar 11, 2019
cb94dbd
chore(package.json): 1.12.13
dolymood Mar 11, 2019
aaaca62
build: package
dolymood Mar 11, 2019
7989d46
build: docs
dolymood Mar 11, 2019
07c05a9
feat(date-picker): support display order
cuijing1031 Mar 23, 2019
f4393ee
docs(date-picker): columnOrder doc order
dolymood Mar 25, 2019
ffb936c
chore(package.json): 1.12.14
dolymood Mar 25, 2019
fa0c3a3
build: package
dolymood Mar 25, 2019
bc67948
build: docs
dolymood Mar 25, 2019
e196e03
feat: picker data add disabled option
hezhongfeng Apr 8, 2019
595000d
docs: Doc changes about picker data option
hezhongfeng Apr 8, 2019
a177a98
fix(scroll): nested scroll bug
Apr 10, 2019
9a059d2
chore(package.json): 1.12.15
Apr 10, 2019
2a6ae4a
build: package
Apr 10, 2019
3541b8b
Merge pull request #459 from didi/dev
tank0317 Apr 11, 2019
5bae538
build: package
tank0317 Apr 11, 2019
71f270a
upload
hezhongfeng Apr 12, 2019
8d7f5e4
change init and listen event order
hezhongfeng Apr 16, 2019
0db861a
upgrade bs
hezhongfeng Apr 17, 2019
9420009
delete log
hezhongfeng Apr 17, 2019
5f99a3f
Merge remote-tracking branch 'upstream/dev' into dev
hezhongfeng Apr 17, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 41 additions & 32 deletions document/components/docs/en-US/scroll.md
Original file line number Diff line number Diff line change
@@ -11,11 +11,14 @@ So for the Scroll component, The length of `.cube-scroll-content`, the scroll-co

2)Scrolling horizontally: **The width of the content element must be greater than the container element.** Since the child element's width does not exceed the container element by default, the Scroll component's `.cube-scroll-content` element needs to be set to a width greater than the `.cube-scroll-wrapper`.

> Note: If there is any situation where scrolling is not possible, you should first check if the height/width of the content element `.cube-scroll-content` is greater than the height/width of the container element `.cube-scroll-wrapper`. This is a prerequisite for content to scroll. **If there is images in the content, the scrolling should be not normal. The reason is images may not be downloaded when the DOM element is rendered, so the height of the content element is less than expected. At this point you should manually call the Scroll component's `refresh()` method after the image has been loaded, such as calling in the onload event callback, which will recalculate the scroll distance.**


### Example

Five sample code to quickly understand how to use the Scroll component.

- **Basic usage - Default**
- **1. Basic usage - Default**

By setting the data property to an array, you can generate an elegantly scrolling list. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/default.vue).

@@ -36,9 +39,9 @@ Five sample code to quickly understand how to use the Scroll component.

> **Note**: As the scrolling principle above, it is necessary to provide a fixed height to the scroll container, and scroll only when the height of the scroll content is greater than the height of the container.

In the prop `options`, you are able to control the scroll bar seen or not via `scrollbar`, and configure the initial position by `startX/startY`.
In the prop `options`, you are able to control the scrollbar seen or not via `scrollbar`, and configure the initial position by `startX/startY`.

Scroll component provide a `scrollTo()` method that allows you to manually control the list scroll position.
Scroll component provides a `scrollTo()` method that allows you to manually control the list scroll position.

```javascript
scrollTo() {
@@ -53,43 +56,49 @@ Five sample code to quickly understand how to use the Scroll component.

In fact, this is a very useful method, such as when we want to achieve "click different anchor, list scroll to the corresponding position to show different content", you can use the `scrollTo ()` method.

- **Scrolling horizontally - Horizontal**
- **2. Scrolling horizontally - Horizontal**

Scroll component support horizontal scrolling by specifying `direction = 'horizental'`. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/horizontal.vue)
Scroll component supports horizontal scrolling. All you need to do is specifying `direction = 'horizontal'` and giving some styles. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/horizontal.vue)

```html
<div class="horizontal-scroll-list-wrap">
<cube-scroll
ref="scroll"
direction="horizontal">
<ul class="list-wrapper">
<li v-for="item in items" class="list-item">{{ item }}</li>
</ul>
</cube-scroll>
</div>
<cube-scroll
ref="scroll"
:data="items"
direction="horizontal"
class="horizontal-scroll-list-wrap">
<ul class="list-wrapper">
<li v-for="item in items" class="list-item">{{ item }}</li>
</ul>
</cube-scroll>
```

```stylus
.cube-scroll-content
display: inline-block
.horizontal-scroll-list-wrap
border: 1px solid rgba(0, 0, 0, 0.1)
border-radius: 5px
.cube-scroll-content
display: inline-block
.list-wrapper
padding: 0 10px
line-height: 60px
white-space: nowrap
.list-item
display: inline-block
.list-item
display: inline-block
```

> **Note**:As the scrolling principle above, the CSS style setting here is required, and scrolling is possible only when the scrolling content is wider than the container width.
> **Note**:1. As the scrolling principle above, the CSS style setting here is required, and scrolling is possible only when the scrolling content is wider than the container width. 2. Sometimes we want to use the `Scroll` component to simulate the horizontal scroll, vertically retaining the browser's native scrolling, or vice versa. At this point you need to pass the better-scroll configuration item [eventPassthrough](http://ustbhuangyi.github.io/better-scroll/doc/en/options.html#eventpassthrough)

Here giving a brief explanation of the style settings. `list-item` items with `display: inline-block` lead to all `list-item` elements showing on one line. `list-wrapper` adds `white-space: nowrap` hope `list-item` also showing on one line when reaching the outer element boundary. And the most important is setting `cube-scroll-content` with `display: inline-block`, which make the width of `cube-scroll-content` bigger enough so that `cube-scroll-content` can wrap descendants elements. Styles with the same properties are floating elements and absolutely positioned elements. When no specific width is set, the width is the minimum width of the wrapped descendant element.

- **Custom content - Customized**
- **3. Custom content - Customized**

The Scroll component supports the customization of list content through default slot. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/config.vue).

```html
<div class="scroll-list-wrap">
<cube-scroll
ref="scroll"
:data="items"
:options="options"
@pulling-down="onPullingDown"
@pulling-up="onPullingUp">
@@ -98,7 +107,7 @@ Five sample code to quickly understand how to use the Scroll component.
</div>
```

Scroll components also support **pull-down refresh** and **pull-up load** capabilities. By default, there is no pulldown refresh/pullup load. You can enable corresponding functions by `pullDownRefresh` and `pullUpLoad`. After opening, when pulling down, the Scroll component will show the default pulldown animation and dispatch pulldown events. You can monitor the `pull-down` event to update the data. Similarly, after the pull-up load is enabled, the data can be updated by the `pull-up` event.
Scroll components also support **pull-down refresh** and **pull-up load** capabilities. By default, there is no pulldown refresh/pull-up load. You can enable corresponding functions by `pullDownRefresh` and `pullUpLoad`. After opening, when pulling down, the Scroll component will show the default pulldown animation and dispatch pulldown events. You can monitor the `pull-down` event to update the data. Similarly, after the pull-up load is enabled, the data can be updated by the `pull-up` event.

`pullDownRefresh`'s related configurations include: drop threshold (threshold), rebound position (stop), update successful copy (txt) and copy display time (stopTime). See the [Props configuration](#/en-US/docs/scroll#cube-Propsconfiguration-anchor) for all the configuration items and meanings of the `pullDownRefresh` and `pullUpLoad` objects.

@@ -144,9 +153,9 @@ Five sample code to quickly understand how to use the Scroll component.
}
```

> **Note**: If a pulldown refresh has no data update, you must manually call the Scroll component's `forceUpdate()` method to end the pulldown refresh so that Scroll will restart listening for the next pulldown refresh operation. When the data is updated, the Scroll component will invoke `forceUpate()` method internally.
> **Note**: If a pulldown-refresh/pullup-loading has no data update, you must manually call the Scroll component's `forceUpdate()` method to end the pulldown-refresh/pullup-loading so that Scroll will restart listening for the next pulldown-refresh/pullup-loading operation. In the above example, when the data is updated, we did not invoke the `forceUpdate()` method. The reason is: ** If you pass the `data` attribute to the `Scroll` component, then when the `Scroll` component listens to the `data` update, the `forceUpate(true)` method will be called automatically. ** so it is recommended to pass the `data` attribute.

- **Custom pull-down refresh animation - Fake JD App**
- **4. Custom pull-down refresh animation - Fake JD App**

If you don't like the built-in pull-down refresh and pull-up loading animations, you can also use the scope slots for custom animations. The variables exposed by [the scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots) of the Scroll component are perfect to meet the needs of custom pull-down/pull-up animations in most scenarios. The following example imitates the pull-down refresh animation of Jingdong App's homepage. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/jd.vue).

@@ -232,12 +241,12 @@ Five sample code to quickly understand how to use the Scroll component.
| - | - | - | - |
| 1. Untrigger pull-down refresh | true | - | Show pattern guide user continues to pull down |
| 2. Trigger pull-down refresh | false | true | Asynchronous request data,show loading |
| 3. Request data success | false | false | invoke `forceUpdate()`, show success copy |
| 4. A pull-down refresh complete | true | - | after invoke `forceUpdate()`, delay stopTime to step 4 |
| 3. Request data success | false | false | invoke `forceUpdate(true)`, show success copy. And delay 'stopTime' into step 4 |
| 4. A pull-down refresh complete | true | - | - |

- **Advanced usage - Fake TouTiao App**
- **5. Advanced usage - Fake TouTiao App**

Scroll components can meet the scrolling needs of most mobile applications. In this example, using two Scroll components, one vertical and one horizontal, to imitates the Toutiao App's home page. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/toutiao.vue).
Scroll components can meet the scrolling needs of most mobile applications. In this example, using two Scroll components, one vertical and one horizontal, to imitates the Toutiao App's home page. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/toutiao.vue).

```html
<div class="nav-scroll-list-wrap">
@@ -319,10 +328,10 @@ In `options`, there are three frequently-used options, `scrollbar`、`pullDownRe

| Attribute | Description | Type | Accepted Values | Default |
| - | - | - | - | - |
| threshold | the threshold of distance that pulling down for refreshing | Number | - | 90 |
| threshold | the threshold of distance that pulling down for refreshing | Number | - | 90 |
| stop | the position where rebounding stays | Number | - | Scroll component will calculate the height of pulldown element as default `stop` value |
| stopTime | the time that keep showing the text of refreshing success | Number | - | 600 |
| txt | the text shown when refreshing successfully | String | - | 'Refresh success' |
| stopTime | the time that keeps showing the text of refreshing success | Number | - | 600 |
| txt | the text is shown when refreshing successfully | String | - | 'Refresh success' |

- `pullUpLoad` sub configuration

@@ -356,8 +365,8 @@ In `options`, there are three frequently-used options, `scrollbar`、`pullDownRe
| Method Name | Description | Parameters |
| - | - | - |
| scrollTo | Scroll to specific position. | x: horizontal position<br> y: vertical position<br> time: transition time<br> ease: easing function |
| forceUpdate | Mark the end of pull-up or pull-down, and force recalculation of scrollable distance | dirty: whether there is data updating, when "true" indicate data updated so recalculate scrollable distance, when false no data update and no need to recalculate |
| disable | Disable scroll. | - |
| enable | Enable scroll. It's enabled by default | - |
| forceUpdate | If a pulldown/pullup refresh has no data update, you should call `forceUpdate()` method to force update pullUp/pullDown state | - |
| resetPullUpTxt | Reset pull up txt when pull up state changed from no data to data updated | - |
| refresh | Refresh, computed height and called BetterScroll instance's refresh | - |
| refresh | Refresh, computed height and called BetterScroll instance's refresh | - |
Loading