blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Swipe): improve document

Browse Source
This commit is contained in:
陈嘉涵 2020-01-20 19:43:38 +08:00
parent 803727e2f9
commit 57d88bd586
3 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/swipe/README.md
View File

@ -17,12 +17,22 @@ Vue.use(SwipeItem);
Use `autoplay` prop to set autoplay interval
```html
<van-swipe :autoplay="3000" indicator-color="white">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<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>
<style>
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
line-height: 150px;
text-align: center;
background-color: #39a9ed;
}
</style>
```
### Image Lazyload
@ -38,6 +48,11 @@ Use [Lazyload](#/en-US/lazyload) component to lazyload image
```
```js
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
export default {
data() {
return {

25
src/swipe/README.zh-CN.md
View File

@ -14,20 +14,30 @@ Vue.use(SwipeItem);
### 基础用法
通过`autoplay`属性设置自动轮播间隔
每个 SwipeItem 代表一张轮播卡片，可以通过`autoplay`属性设置自动轮播的间隔
```html
<van-swipe :autoplay="3000" indicator-color="white">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<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>
<style>
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
line-height: 150px;
text-align: center;
background-color: #39a9ed;
}
</style>
```
### 图片懒加载
配合 [Lazyload](#/zh-CN/lazyload) 组件实现图片懒加载
当 Swipe 中含有图片时，可以配合 [Lazyload](#/zh-CN/lazyload) 组件实现图片懒加载
```html
<van-swipe :autoplay="3000">
@ -38,6 +48,11 @@ Vue.use(SwipeItem);
```
```js
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
export default {
data() {
return {
@ -194,3 +209,7 @@ export default {
这种情况通常是由于项目中引入了`fastclick`库导致的。`fastclick`的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。
将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。
### 在桌面端无法操作组件？
参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。

4
webpack.config.js
View File

@ -5,7 +5,7 @@ module.exports = function() {
return {
entry: {
'site-mobile': ['./docs/site/mobile']
}
'site-mobile': ['./docs/site/mobile'],
},
};
};