admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 🐛 修复Swiper在微信端长时间处于后台出现抖动的问题 (#413)

Browse Source 
✅ Closes: #411
This commit is contained in:
不如摸鱼去 2024-07-07 21:45:46 +08:00 committed by GitHub
parent 401bd284ce
commit 4741439277
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 97 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/component/swiper.md
View File

@ -6,18 +6,20 @@
## 基础用法
通过设置 `autoplay` 属性控制轮播图是否自动播放，设置 `current` 属性初始化轮播图展示的滑块，监听滑块 `click` 来处理点击事件，而每一页轮播结束后，会触发 `change` 事件。通过
通过设置 `autoplay` 属性控制轮播图是否自动播放，设置 `v-model:current` 属性初始化轮播图展示的滑块，监听滑块 `click` 来处理点击事件，而每一页轮播结束后，会触发 `change` 事件。
```html
<wd-swiper :list="swiperList" autoplay :current="0" @click="handleClick" @change="onChange"></wd-swiper>
<wd-swiper :list="swiperList" autoplay v-model:current="current" @click="handleClick" @change="onChange"></wd-swiper>
```
```ts
const current = ref<number>(0)
const swiperList = ref([
'https://unpkg.com/wot-design-uni-assets/redpanda.jpg',
'https://unpkg.com/wot-design-uni-assets/capybara.jpg',
'https://unpkg.com/wot-design-uni-assets/panda.jpg',
'https://img.yzcdn.cn/vant/cat.jpeg',
'https://unpkg.com/wot-design-uni-assets/moon.jpg',
'https://unpkg.com/wot-design-uni-assets/meng.jpg'
])
function handleClick(e) {
@ -31,7 +33,7 @@ function onChange(e) {
## 点条状指示器
```html
<wd-swiper :list="swiperList" autoplay :current="1" :indicator="{ type: 'dots-bar' }" @click="handleClick" @change="onChange"></wd-swiper>
<wd-swiper :list="swiperList" autoplay v-model:current="current" :indicator="{ type: 'dots-bar' }" @click="handleClick" @change="onChange"></wd-swiper>
```
## 数字指示器
@ -40,7 +42,7 @@ function onChange(e) {
<wd-swiper
:list="swiperList"
autoplay
:current="2"
v-model:current="current"
:indicator="{ type: 'fraction' }"
indicatorPosition="bottom-right"
@click="handleClick"
@ -54,7 +56,7 @@ function onChange(e) {
<wd-swiper
:list="swiperList"
:autoplay="false"
:current="3"
v-model:current="current"
:indicator="{ showControls: true }"
:loop="false"
@click="handleClick"
@ -70,7 +72,7 @@ function onChange(e) {
<view class="card-swiper">
<wd-swiper
autoplay
:current="4"
v-model:current="current"
custom-indicator-class="custom-indicator-class"
custom-image-class="custom-image"
custom-next-image-class="custom-image-prev"
@ -110,7 +112,7 @@ function onChange(e) {
<view class="card-swiper">
<wd-swiper
autoplay
:current="4"
v-model:current="current"
:display-multiple-items="2"
custom-indicator-class="custom-indicator-class"
custom-image-class="custom-image"
@ -153,7 +155,7 @@ function onChange(e) {
direction="vertical"
indicatorPosition="right"
autoplay
:current="1"
v-model:current="current"
:indicator="{ type: 'dots-bar' }"
@click="handleClick"
@change="onChange"
@ -165,7 +167,7 @@ function onChange(e) {
通过 `indicator` 插槽可以自定义指示器的样式。
```html
<wd-swiper :list="swiperList" direction="vertical" indicatorPosition="right" autoplay :current="1" @click="handleClick" @change="onChange">
<wd-swiper :list="swiperList" direction="vertical" indicatorPosition="right" autoplay v-model:current="current" @click="handleClick" @change="onChange">
<template #indicator="{ current, total }">
<view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">{{ current + 1 }}/{{ total }}</view>
</template>
@ -185,6 +187,7 @@ function onChange(e) {
```
## 属性控制切换
```html
<wd-swiper :loop="isLoop" :autoplay="false" :list="swiperList" v-model:current="current" />
<wd-gap />
@ -208,7 +211,7 @@ const isLoop = ref(false)
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| -------------------- | ------------------------------------------------------ | ------------------------- | ---------- | ---------- | -------- |
| -------------------- | ------------------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------ | -------- |
| autoplay | 是否自动播放 | `boolean` | - | true | 0.1.22 |
| v-model:current | 控制当前轮播在哪一项（下标） | `number` | - | 0 | 0.1.22 |
| direction | 轮播滑动方向 | `DirectionType` | `horizontal, vertical` | horizontal | 0.1.22 |
@ -227,7 +230,6 @@ const isLoop = ref(false)
| 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 |
| customStyle | 外部自定义样式 | `string` | - | '' | 0.1.22 |
### DirectionType
轮播滑动方向，可选值为 `'horizontal'` 和 `'vertical'`。
@ -247,7 +249,7 @@ const isLoop = ref(false)
### SwiperIndicatorProps
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ------------------- | -------------------------- | ---------------------- | ------------------------------------------------------------------------ | ---------- | -------- |
| ------------------- | -------------------------- | --------------------- | -------------------------------------------------------------------------- | ---------- | -------- |
| current | 当前轮播在哪一项（下标） | Number | - | 0 | 0.1.22 |
| direction | 轮播滑动方向 | DirectionType | `horizontal, vertical` | horizontal | 0.1.22 |
| min-show-num | 小于这个数字不会显示导航器 | Number | - | 2 | 0.1.22 |

57
src/pages/swiper/Index.vue
View File

@ -1,18 +1,32 @@
<template>
<page-wraper>
<demo-block title="点状指示器">
<wd-swiper :list="swiperList" autoplay :current="0" :indicator="{ type: 'dots' }" @click="handleClick" @change="onChange"></wd-swiper>
<wd-swiper
:list="swiperList"
autoplay
v-model:current="current"
:indicator="{ type: 'dots' }"
@click="handleClick"
@change="onChange"
></wd-swiper>
</demo-block>
<demo-block title="点条状指示器">
<wd-swiper :list="swiperList" autoplay :current="1" :indicator="{ type: 'dots-bar' }" @click="handleClick" @change="onChange"></wd-swiper>
<wd-swiper
:list="swiperList"
autoplay
v-model:current="current1"
:indicator="{ type: 'dots-bar' }"
@click="handleClick"
@change="onChange"
></wd-swiper>
</demo-block>
<demo-block title="数字指示器">
<wd-swiper
:list="swiperList"
autoplay
:current="2"
v-model:current="current2"
:indicator="{ type: 'fraction' }"
indicator-position="bottom-right"
@click="handleClick"
@ -24,7 +38,7 @@
<wd-swiper
:list="swiperList"
:autoplay="false"
:current="3"
v-model:current="current3"
:indicator="{ showControls: true }"
:loop="false"
@click="handleClick"
@ -36,7 +50,7 @@
<view class="card-swiper">
<wd-swiper
autoplay
:current="4"
v-model:current="current4"
custom-indicator-class="custom-indicator-class"
custom-image-class="custom-image"
custom-next-image-class="custom-image-prev"
@ -53,7 +67,7 @@
<view class="card-swiper">
<wd-swiper
autoplay
:current="4"
v-model:current="current5"
:display-multiple-items="2"
custom-indicator-class="custom-indicator-class"
custom-image-class="custom-image"
@ -73,7 +87,7 @@
direction="vertical"
indicator-position="right"
autoplay
:current="1"
v-model:current="current6"
:indicator="{ type: 'dots-bar' }"
@click="handleClick"
@change="onChange"
@ -81,7 +95,15 @@
</demo-block>
<demo-block title="自定义指示器">
<wd-swiper :list="swiperList" direction="vertical" indicator-position="right" autoplay :current="1" @click="handleClick" @change="onChange">
<wd-swiper
:list="swiperList"
direction="vertical"
indicator-position="right"
autoplay
v-model:current="current7"
@click="handleClick"
@change="onChange"
>
<template #indicator="{ current, total }">
<view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">{{ current + 1 }}/{{ total }}</view>
</template>
@ -89,18 +111,18 @@
</demo-block>
<demo-block title="属性控制切换">
<wd-swiper :loop="isLoop" :autoplay="false" :list="swiperList" v-model:current="current" />
<wd-swiper :loop="isLoop" :autoplay="false" :list="swiperList" v-model:current="current8" />
<wd-gap />
<wd-cell-group>
<wd-cell title="loop">
<wd-switch v-model="isLoop" size="24px" />
</wd-cell>
<wd-cell title="current" :value="current.toString()" />
<wd-cell title="current" :value="current8.toString()" />
</wd-cell-group>
<view style="display: flex; justify-content: space-between">
<wd-button @click="current--">prev</wd-button>
<wd-button @click="current8--">prev</wd-button>
<wd-button type="success" @click="current++">next</wd-button>
<wd-button type="success" @click="current8++">next</wd-button>
</view>
</demo-block>
</page-wraper>
@ -112,11 +134,20 @@ const swiperList = ref([
'https://unpkg.com/wot-design-uni-assets/redpanda.jpg',
'https://unpkg.com/wot-design-uni-assets/capybara.jpg',
'https://unpkg.com/wot-design-uni-assets/panda.jpg',
'https://img.yzcdn.cn/vant/cat.jpeg',
'https://unpkg.com/wot-design-uni-assets/moon.jpg',
'https://unpkg.com/wot-design-uni-assets/meng.jpg'
])
const current = ref<number>(0)
const current1 = ref<number>(1)
const current2 = ref<number>(2)
const current3 = ref<number>(3)
const current4 = ref<number>(4)
const current5 = ref<number>(0)
const current6 = ref<number>(0)
const current7 = ref<number>(0)
const current8 = ref<number>(0)
const isLoop = ref(false)
function handleClick(e: any) {

13
src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue
View File

@ -3,7 +3,7 @@
<swiper
class="wd-swiper__track"
:autoplay="autoplay"
:current="navCurrent"
:current="current"
:interval="interval"
:duration="duration"
:circular="loop"
@ -136,6 +136,9 @@ function getCustomImageClass(current: number, index: number, list: string[] | Sw
function handleChange(e: { detail: { current: any; source: string } }) {
const { current, source } = e.detail
navCurrent.value = current
// #ifndef MP-WEIXIN
emit('update:current', navCurrent.value)
// #endif
emit('change', { current, source })
}
@ -144,10 +147,13 @@ function handleChange(e: { detail: { current: any; source: string } }) {
*/
function handleAnimationfinish(e: { detail: { current: any; source: string } }) {
const { current, source } = e.detail
// navCurrent.value = current
// #ifdef MP-WEIXIN
// 兼容微信swiper抖动的问题
emit('update:current', navCurrent.value)
// #endif
/**
* 滑块动画结束时触发
* @arg value:Object 滑块值
*/
emit('animationfinish', { current, source })
}
@ -180,6 +186,7 @@ function doIndicatorBtnChange(dir: string, source: string) {
navCurrent.value = nextPos
emit('change', { current: nextPos, source })
emit('update:current', navCurrent.value)
}
</script>