ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2026-03-06 02:06:58 +08:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

[breaking change] reconstruct Swipe component (#194)

Browse Source 
* Swipe: reconstruct

* [bugfix]: Swipe autoplay

[bugfix] AddressEdit doc link
This commit is contained in:
neverland
2017-10-12 06:22:12 -05:00
committed by GitHub
parent 77f6a798e4
commit 560ccfdec2
12 changed files with 242 additions and 681 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/examples-docs/zh-CN/address-edit.md
View File

@@ -139,4 +139,4 @@ export default {
| address | 详细地址 | `String` |
#### 省市县列表数据格式
请参考 [Area](/zanui/vue/component/area) 组件。
请参考 [Area](#/zh-CN/component/area) 组件。

140
docs/examples-docs/zh-CN/swipe.md
View File

@@ -1,10 +1,34 @@
<style>
.demo-swipe {
padding-bottom: 30px;
.van-swipe {
height: 200px;
cursor: pointer;
&-item {
color: #fff;
min-height: 140px;
font-size: 20px;
text-align: center;
line-height: 150px;
&:nth-child(even) {
background-color: #39a9ed;
}
&:nth-child(odd) {
background-color: #66c6f2;
}
}
img {
width: 100%;
height: 240px;
display: block;
padding: 30px 60px;
box-sizing: border-box;
background-color: #fff;
pointer-events: none;
}
}
}
@@ -14,21 +38,13 @@
export default {
data() {
return {
autoImages: [
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
],
images: [
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
]
};
},
methods: {
handlePageEnd(page, index) {
console.log(page, index);
}
}
};
</script>
@@ -46,14 +62,27 @@ Vue.component(SwipeItem.name, SwipeItem);
### 代码演示
#### 基础用法
通过`autoplay`属性设置自动轮播间隔
:::demo 基础用法
```html
<van-swipe :autoplay="3000">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
```
:::
#### 图片懒加载
配合 [Lazyload](#/zh-CN/component/lazyload) 组件实现图片懒加载
:::demo 图片懒加载
```html
<van-swipe>
<van-swipe-item v-for="(img, index) in images" :key="index">
<a href="https://youzan.com" target="_blank">
<img v-lazy="img" alt="">
</a>
<van-swipe-item v-for="(image, index) in images" :key="index">
<img v-lazy="image" />
</van-swipe-item>
</van-swipe>
```
@@ -63,84 +92,25 @@ export default {
data() {
return {
images: [
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]
};
}
};
```
:::
#### 隐藏指示器
需要设置`show-indicators`属性为`false`，即会隐藏指示器。
:::demo 隐藏指示器
```html
<van-swipe :show-indicators="false">
<van-swipe-item v-for="(img, index) in autoImages" :key="index">
<img v-lazy="img" alt="">
</van-swipe-item>
</van-swipe>
```
```javascript
export default {
data() {
return {
autoImages: [
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
]
};
}
};
```
:::
#### 自动轮播
需要设置`auto-play`属性为`true`，即会自动轮播。
:::demo 自动轮播
```html
<van-swipe auto-play @pagechange:end="handlePageEnd">
<van-swipe-item v-for="(img, index) in autoImages" :key="index">
<img v-lazy="img" alt="">
</van-swipe-item>
</van-swipe>
```
```javascript
export default {
data() {
return {
autoImages: [
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
]
};
},
methods: {
handlePageEnd(page, index) {
console.log(page, index);
}
}
};
}
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| autoPlay | 是否自动轮播 | `Boolean` | `false` | `true`, `false` |
| showIndicators | 是否显示指示器 | `Boolean` | `true` | `true`, `false` |
| autoplay | 自动轮播间隔，单位为 ms | `Number` | - | - |
| duration | 动画时长，单位为 ms | `Number` | `500` | - |
| showIndicators | 是否显示指示器 | `Boolean` | `true` | - |
### 事件
| 事件名 | 说明 | 参数 |
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| `pagechange:end` | 每一页轮播结束后触发 | `(elem, currIndex)`：`elem`为触发页当前的DOM节点 |
| change | 每一页轮播结束后触发 | index, 当前页的索引 |