alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[new feature] add List component (#682)

Browse Source
This commit is contained in:
neverland
2018-03-13 16:01:50 +08:00
committed by GitHub
parent 1a2a64225b
commit 5592db2cb2
22 changed files with 495 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/demos/index.js
+1
View File
@@ -44,6 +44,7 @@ export default {
'image-preview': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/image-preview'), 'image-preview')), 'image-preview')),
'layout': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/layout'), 'layout')), 'layout')),
'lazyload': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/lazyload'), 'lazyload')), 'lazyload')),
'list': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/list'), 'list')), 'list')),
'loading': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/loading'), 'loading')), 'loading')),
'nav-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/nav-bar'), 'nav-bar')), 'nav-bar')),
'notice-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/notice-bar'), 'notice-bar')), 'notice-bar')),
docs/demos/views/list.vue
+79
View File
@@ -0,0 +1,79 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<p class="page-desc">{{ $t('text') }}</p>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item + ''" />
</van-list>
</van-pull-refresh>
</demo-block>
</demo-section>
</template>
<script>
export default {
i18n: {
'zh-CN': {
text: '当即将滚动到元素底部时，会自动加载更多'
},
'en-US': {
text: 'This list will load items will scroll to bottom.'
}
},
data() {
return {
list: [],
refreshing: false,
loading: false,
finished: false
};
},
methods: {
onLoad() {
setTimeout(() => {
for (let i = 0; i < 10; i++) {
let text = this.list.length + 1;
this.list.push(text < 10 ? '0' + text : text);
}
this.loading = false;
if (this.list.length >= 40) {
this.finished = true;
}
}, 500);
},
onRefresh() {
setTimeout(() => {
this.list = [];
this.finished = false;
this.refreshing = false;
window.scrollTo(0, 10);
}, 1000);
}
}
};
</script>
<style lang="postcss">
.demo-list {
.van-cell {
text-align: center;
}
.page-desc {
padding: 5px 0;
line-height: 1.4;
font-size: 14px;
text-align: center;
color: #666;
}
}
</style>
docs/demos/views/waterfall.vue
+5 -2
View File
@@ -1,5 +1,6 @@
<template>
<demo-section>
<van-notice-bar>{{ $t('tips') }}</van-notice-bar>
<demo-block :title="$t('basicUsage')">
<p class="page-desc">{{ $t('text') }}</p>
<ul
@@ -18,10 +19,12 @@ import { Waterfall } from 'packages';
export default {
i18n: {
'zh-CN': {
text: '当即将滚动到元素底部时，会自动加载更多'
text: '当即将滚动到元素底部时，会自动加载更多',
tips: '注意：Waterfall 已被废弃，请使用 List 组件代替'
},
'en-US': {
text: 'This list will load items will scroll to bottom.'
text: 'This list will load items will scroll to bottom.',
tips: 'Waterfall is deprecated and no longer maintained, please use the List component instead.'
}
},
docs/markdown/en-US/list.md
+66
View File
@@ -0,0 +1,66 @@
## List
A list component to show items and control loading status.
### Install
``` javascript
import { List } from 'vant';
Vue.use(List);
```
### Usage
#### Basic Usage
```html
<van-list
v-model="loading"
:finished="finished"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item + ''" />
</van-list>
```
```js
export default {
data() {
return {
list: [],
loading: false,
finished: false
};
},
methods: {
onLoad() {
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
this.loading = false;
if (this.list.length >= 40) {
this.finished = true;
}
}, 500);
}
}
}
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| loading | Whether to show loading info，the `load` event will not be triggered when loading | `Boolean` | `false` | - |
| finished | Whether loading is finished，the `load` event will not be triggered when finished | `Boolean` | `false` | - |
| offset | The load event will be triggered when the distance between the scrollbar and the bottom is less than offset | `Number` | `300` | - |
| loading-text | Loading text | `String` | `Loading...` | - |
| immediate-check | Whether to check loading position immediately after mounted | `Boolean` | `true` | - |
### Event
| Event | Description | Arguments |
|-----------|-----------|-----------|
| load | Triggered when the distance between the scrollbar and the bottom is less than offset | - |
docs/markdown/en-US/waterfall.md
+1
View File
@@ -1,4 +1,5 @@
## Waterfall
Note: Waterfall is deprecated and no longer maintained, please use the [List](#/zh-CN/list) component instead.
### Install
docs/markdown/index.js
+2
View File
@@ -40,6 +40,7 @@ export default {
'zh-CN/intro': wrapper(r => require.ensure([], () => r(require('./zh-CN/intro.md')), 'zh-CN/intro')),
'zh-CN/layout': wrapper(r => require.ensure([], () => r(require('./zh-CN/layout.md')), 'zh-CN/layout')),
'zh-CN/lazyload': wrapper(r => require.ensure([], () => r(require('./zh-CN/lazyload.md')), 'zh-CN/lazyload')),
'zh-CN/list': wrapper(r => require.ensure([], () => r(require('./zh-CN/list.md')), 'zh-CN/list')),
'zh-CN/loading': wrapper(r => require.ensure([], () => r(require('./zh-CN/loading.md')), 'zh-CN/loading')),
'zh-CN/nav-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/nav-bar.md')), 'zh-CN/nav-bar')),
'zh-CN/notice-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/notice-bar.md')), 'zh-CN/notice-bar')),
@@ -95,6 +96,7 @@ export default {
'en-US/intro': wrapper(r => require.ensure([], () => r(require('./en-US/intro.md')), 'en-US/intro')),
'en-US/layout': wrapper(r => require.ensure([], () => r(require('./en-US/layout.md')), 'en-US/layout')),
'en-US/lazyload': wrapper(r => require.ensure([], () => r(require('./en-US/lazyload.md')), 'en-US/lazyload')),
'en-US/list': wrapper(r => require.ensure([], () => r(require('./en-US/list.md')), 'en-US/list')),
'en-US/loading': wrapper(r => require.ensure([], () => r(require('./en-US/loading.md')), 'en-US/loading')),
'en-US/nav-bar': wrapper(r => require.ensure([], () => r(require('./en-US/nav-bar.md')), 'en-US/nav-bar')),
'en-US/notice-bar': wrapper(r => require.ensure([], () => r(require('./en-US/notice-bar.md')), 'en-US/notice-bar')),
docs/markdown/zh-CN/list.md
+66
View File
@@ -0,0 +1,66 @@
## List 列表
瀑布流滚动加载，用于控制长列表的展示
### 使用指南
``` javascript
import { List } from 'vant';
Vue.use(List);
```
### 代码演示
#### 基础用法
```html
<van-list
v-model="loading"
:finished="finished"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item + ''" />
</van-list>
```
```js
export default {
data() {
return {
list: [],
loading: false,
finished: false
};
},
methods: {
onLoad() {
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
this.loading = false;
if (this.list.length >= 40) {
this.finished = true;
}
}, 500);
}
}
}
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| loading | 是否显示加载中提示，加载过程中不触发`load`事件 | `Boolean` | `false` | - |
| finished | 是否已加载完成，加载完成后不再触发`load`事件 | `Boolean` | `false` | - |
| offset | 滚动条与底部距离小于 offset 时触发`load`事件 | `Number` | `300` | - |
| loading-text | 加载中提示文案 | `String` | `加载中...` | - |
| immediate-check | 是否在初始化时立即执行滚动位置检查 | `Boolean` | `true` | - |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| load | 滚动条与底部距离小于 offset 时触发 | - |
docs/markdown/zh-CN/loading.md
+1 -1
View File
@@ -34,6 +34,6 @@ Vue.use(Loading);
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| color | 颜色 | `String` | `black` | `black` `white` |
| color | 颜色 | `String` | `black` | `white` |
| type | 类型 | `String` | `circular` | `spinner` `circle` |
| size | 大小 | `String` | `30px` | - |
docs/markdown/zh-CN/waterfall.md
+1 -1
View File
@@ -1,4 +1,5 @@
## Waterfall 瀑布流
注意：Waterfall 组件已被废弃且不再维护，请使用 [List](#/zh-CN/list) 组件代替
### 使用指南
@@ -78,4 +79,3 @@ export default {
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | - |
| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | - |
| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | - |
docs/src/WapApp.vue
+3 -1
View File
@@ -7,7 +7,9 @@
left-arrow
@click-left="onBack"
/>
<router-view />
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
docs/src/doc.config.js
+8
View File
@@ -104,6 +104,10 @@ module.exports = {
path: '/lazyload',
title: 'Lazyload - 图片懒加载'
},
{
path: '/list',
title: 'List - 列表'
},
{
path: '/loading',
title: 'Loading - 加载'
@@ -394,6 +398,10 @@ module.exports = {
path: '/lazyload',
title: 'Lazyload'
},
{
path: '/list',
title: 'List'
},
{
path: '/loading',
title: 'Loading'