Skip to content

Commit 4741439

Browse files
MoonofweishengMoonofweisheng
authored
fix: 🐛 修复Swiper在微信端长时间处于后台出现抖动的问题 (#413)
✅ Closes: #411
1 parent 401bd28 commit 4741439

File tree

3 files changed

+97
-57
lines changed

3 files changed

+97
-57
lines changed

‎docs/component/swiper.md‎

Lines changed: 43 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,20 @@
66

77
## 基础用法
88

9-
通过设置 `autoplay` 属性控制轮播图是否自动播放，设置 `current` 属性初始化轮播图展示的滑块，监听滑块 `click` 来处理点击事件，而每一页轮播结束后，会触发 `change` 事件。通过
9+
通过设置 `autoplay` 属性控制轮播图是否自动播放，设置 `v-model:current` 属性初始化轮播图展示的滑块，监听滑块 `click` 来处理点击事件，而每一页轮播结束后，会触发 `change` 事件。
1010

1111
```html
12-
<wd-swiper :list="swiperList" autoplay :current="0" @click="handleClick" @change="onChange"></wd-swiper>
12+
<wd-swiper :list="swiperList" autoplay v-model:current="current" @click="handleClick" @change="onChange"></wd-swiper>
1313
```
1414

1515
```ts
16+
const current = ref<number>(0)
17+
1618
const swiperList = ref([
1719
'https://unpkg.com/wot-design-uni-assets/redpanda.jpg',
1820
'https://unpkg.com/wot-design-uni-assets/capybara.jpg',
1921
'https://unpkg.com/wot-design-uni-assets/panda.jpg',
20-
'https://img.yzcdn.cn/vant/cat.jpeg',
22+
'https://unpkg.com/wot-design-uni-assets/moon.jpg',
2123
'https://unpkg.com/wot-design-uni-assets/meng.jpg'
2224
])
2325
function handleClick(e) {
@@ -31,7 +33,7 @@ function onChange(e) {
3133
## 点条状指示器
3234

3335
```html
34-
<wd-swiper :list="swiperList" autoplay :current="1" :indicator="{ type: 'dots-bar' }" @click="handleClick" @change="onChange"></wd-swiper>
36+
<wd-swiper :list="swiperList" autoplay v-model:current="current" :indicator="{ type: 'dots-bar' }" @click="handleClick" @change="onChange"></wd-swiper>
3537
```
3638

3739
## 数字指示器
@@ -40,7 +42,7 @@ function onChange(e) {
4042
<wd-swiper
4143
:list="swiperList"
4244
autoplay
43-
:current="2"
45+
v-model:current="current"
4446
:indicator="{ type: 'fraction' }"
4547
indicatorPosition="bottom-right"
4648
@click="handleClick"
@@ -54,7 +56,7 @@ function onChange(e) {
5456
<wd-swiper
5557
:list="swiperList"
5658
:autoplay="false"
57-
:current="3"
59+
v-model:current="current"
5860
:indicator="{ showControls: true }"
5961
:loop="false"
6062
@click="handleClick"
@@ -70,7 +72,7 @@ function onChange(e) {
7072
<view class="card-swiper">
7173
<wd-swiper
7274
autoplay
73-
:current="4"
75+
v-model:current="current"
7476
custom-indicator-class="custom-indicator-class"
7577
custom-image-class="custom-image"
7678
custom-next-image-class="custom-image-prev"
@@ -110,7 +112,7 @@ function onChange(e) {
110112
<view class="card-swiper">
111113
<wd-swiper
112114
autoplay
113-
:current="4"
115+
v-model:current="current"
114116
:display-multiple-items="2"
115117
custom-indicator-class="custom-indicator-class"
116118
custom-image-class="custom-image"
@@ -153,7 +155,7 @@ function onChange(e) {
153155
direction="vertical"
154156
indicatorPosition="right"
155157
autoplay
156-
:current="1"
158+
v-model:current="current"
157159
:indicator="{ type: 'dots-bar' }"
158160
@click="handleClick"
159161
@change="onChange"
@@ -165,7 +167,7 @@ function onChange(e) {
165167
通过 `indicator` 插槽可以自定义指示器的样式。
166168

167169
```html
168-
<wd-swiper :list="swiperList" direction="vertical" indicatorPosition="right" autoplay :current="1" @click="handleClick" @change="onChange">
170+
<wd-swiper :list="swiperList" direction="vertical" indicatorPosition="right" autoplay v-model:current="current" @click="handleClick" @change="onChange">
169171
<template #indicator="{ current, total }">
170172
<view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">{{ current + 1 }}/{{ total }}</view>
171173
</template>
@@ -185,6 +187,7 @@ function onChange(e) {
185187
```
186188

187189
## 属性控制切换
190+
188191
```html
189192
<wd-swiper :loop="isLoop" :autoplay="false" :list="swiperList" v-model:current="current" />
190193
<wd-gap />
@@ -201,32 +204,31 @@ function onChange(e) {
201204
```
202205

203206
```javascript
204-
const current = ref<number>(0)
207+
const current = ref <number>(0)
205208
const isLoop = ref(false)
206209
```
207210

208211
## Attributes
209212

210-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
211-
| -------------------- | ------------------------------------------------------ | ------------------------- | ---------- | ---------- | -------- |
212-
| autoplay | 是否自动播放 | `boolean` | - | true | 0.1.22 |
213-
| v-model:current | 控制当前轮播在哪一项（下标） | `number` | - | 0 | 0.1.22 |
214-
| direction | 轮播滑动方向 | `DirectionType` | `horizontal, vertical` | horizontal | 0.1.22 |
215-
| displayMultipleItems | 同时显示的滑块数量 | `number` | - | 1 | 0.1.22 |
216-
| duration | 滑动动画时长 | `number` | - | 300 | 0.1.22 |
217-
| easingFunction | 切换缓动动画类型（微信小程序、快手小程序、京东小程序） | `EasingType` | - | default | 0.1.22 |
218-
| height | 轮播的高度 | `string \| number` | - | 192 | 0.1.22 |
219-
| interval | 轮播间隔时间 | `number` | - | 5000 | 0.1.22 |
220-
| list | 图片列表 | `string[] \| SwiperList[]` | - | - | 0.1.22 |
221-
| loop | 是否循环播放 | `boolean` | - | true | 0.1.22 |
222-
| nextMargin | 后边距 | `string \| number` | - | 0 | 0.1.22 |
223-
| indicatorPosition | 指示器展示位置 | `IndicatorPositionType` | `left, top-left, top, top-right, bottom-left, bottom, bottom-right, right` | bottom | 0.1.22 |
224-
| previousMargin | 前边距 | `string \| number` | - | 0 | 0.1.22 |
225-
| snapToEdge | 边距是否应用到第一个、最后一个元素 | `boolean` | - | false | 0.1.22 |
226-
| indicator | 指示器全部配置 | `SwiperIndicatorProps \| boolean` | - | true | 0.1.22 |
227-
| imageMode | 图片裁剪、缩放的模式 | `string` | 参考官方文档[mode](https://uniapp.dcloud.net.cn/component/image.html#mode-%E6%9C%89%E6%95%88%E5%80%BC) | `aspectFill` | 0.1.55 |
228-
| customStyle | 外部自定义样式 | `string` | - | '' | 0.1.22 |
229-
213+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
214+
| -------------------- | ------------------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------ | -------- |
215+
| autoplay | 是否自动播放 | `boolean` | - | true | 0.1.22 |
216+
| v-model:current | 控制当前轮播在哪一项（下标） | `number` | - | 0 | 0.1.22 |
217+
| direction | 轮播滑动方向 | `DirectionType` | `horizontal, vertical` | horizontal | 0.1.22 |
218+
| displayMultipleItems | 同时显示的滑块数量 | `number` | - | 1 | 0.1.22 |
219+
| duration | 滑动动画时长 | `number` | - | 300 | 0.1.22 |
220+
| easingFunction | 切换缓动动画类型（微信小程序、快手小程序、京东小程序） | `EasingType` | - | default | 0.1.22 |
221+
| height | 轮播的高度 | `string \| number` | - | 192 | 0.1.22 |
222+
| interval | 轮播间隔时间 | `number` | - | 5000 | 0.1.22 |
223+
| list | 图片列表 | `string[] \| SwiperList[]` | - | - | 0.1.22 |
224+
| loop | 是否循环播放 | `boolean` | - | true | 0.1.22 |
225+
| nextMargin | 后边距 | `string \| number` | - | 0 | 0.1.22 |
226+
| indicatorPosition | 指示器展示位置 | `IndicatorPositionType` | `left, top-left, top, top-right, bottom-left, bottom, bottom-right, right` | bottom | 0.1.22 |
227+
| previousMargin | 前边距 | `string \| number` | - | 0 | 0.1.22 |
228+
| snapToEdge | 边距是否应用到第一个、最后一个元素 | `boolean` | - | false | 0.1.22 |
229+
| indicator | 指示器全部配置 | `SwiperIndicatorProps \| boolean` | - | true | 0.1.22 |
230+
| imageMode | 图片裁剪、缩放的模式 | `string` | 参考官方文档[mode](https://uniapp.dcloud.net.cn/component/image.html#mode-%E6%9C%89%E6%95%88%E5%80%BC) | `aspectFill` | 0.1.55 |
231+
| customStyle | 外部自定义样式 | `string` | - | '' | 0.1.22 |
230232

231233
### DirectionType
232234

@@ -246,16 +248,16 @@ const isLoop = ref(false)
246248

247249
### SwiperIndicatorProps
248250

249-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
250-
| ------------------- | -------------------------- | ---------------------- | ------------------------------------------------------------------------ | ---------- | -------- |
251-
| current | 当前轮播在哪一项（下标） | Number | - | 0 | 0.1.22 |
252-
| direction | 轮播滑动方向 | DirectionType | `horizontal, vertical` | horizontal | 0.1.22 |
253-
| min-show-num | 小于这个数字不会显示导航器 | Number | - | 2 | 0.1.22 |
251+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
252+
| ------------------- | -------------------------- | --------------------- | -------------------------------------------------------------------------- | ---------- | -------- |
253+
| current | 当前轮播在哪一项（下标） | Number | - | 0 | 0.1.22 |
254+
| direction | 轮播滑动方向 | DirectionType | `horizontal, vertical` | horizontal | 0.1.22 |
255+
| min-show-num | 小于这个数字不会显示导航器 | Number | - | 2 | 0.1.22 |
254256
| pagination-position | 页码信息展示位置 | IndicatorPositionType | `left, top-left, top, top-right, bottom-left, bottom, bottom-right, right` | bottom | 0.1.22 |
255-
| show-controls | 是否显示控制按钮 | Boolean | - | false | 0.1.22 |
256-
| total | 总共的项数 | Number | - | 0 | 0.1.22 |
257-
| type | 导航器类型 | SwiperIndicatorType | `dots, dots-bar, fraction ` | dots | 0.1.22 |
258-
| autoplay | 是否自动播放 | boolean | - | true | 0.1.22 |
257+
| show-controls | 是否显示控制按钮 | Boolean | - | false | 0.1.22 |
258+
| total | 总共的项数 | Number | - | 0 | 0.1.22 |
259+
| type | 导航器类型 | SwiperIndicatorType | `dots, dots-bar, fraction ` | dots | 0.1.22 |
260+
| autoplay | 是否自动播放 | boolean | - | true | 0.1.22 |
259261

260262
## Events
261263

@@ -275,7 +277,7 @@ const isLoop = ref(false)
275277
| 类名 | 说明 | 最低版本 |
276278
| -------------------- | -------------------- | -------- |
277279
| customClass | 外部自定义类名 | 0.1.22 |
278-
| customIndicatorClass | 自定义指示器类名 | 0.1.22 |
280+
| customIndicatorClass | 自定义指示器类名 | 0.1.22 |
279281
| customImageClass | 自定义图片类名 | 0.1.22 |
280282
| customPrevImageClass | 自定义上一个图片类名 | 0.1.22 |
281283
| customNextImageClass | 自定义下一个图片类名 | 0.1.22 |

0 commit comments

Comments
 (0)