一、uni-appswiper嵌套
在uni-app中,我们可以使用uni-appswiper来轻松地实现轮播图的功能。而对于一些特殊需求,我们可能需要在一个uni-appswiper中嵌套另一个uni-appswiper来实现复杂的轮播效果。
要实现uni-appswiper嵌套,我们需要在外层swiper中设置direction属性为'vertical',使其为纵向轮播,同时需要在每个嵌套的swiper-item中设置height属性为整个外层swiper的高度,以便能够正常显示。
<uni-swiper direction='vertical' :indicator-dots="false">
<uni-swiper-item v-for="(item, index) in list" :key="index" :height="swiperHeight">
<uni-swiper :duration="500" :autoplay="true">
<uni-swiper-item v-for="(subItem, subIndex) in item.subList" :key="subIndex">
<img :src="subItem.imgUrl" :width="imgWidth" :height="swiperHeight" />
</uni-swiper-item>
</uni-swiper>
</uni-swiper-item>
</uni-swiper>
二、uni-appswiper监听滑动事件
如果我们需要在轮播图滑动过程中做一些特殊的处理,比如当轮播图滑动到最后一张时,自动跳转到第一张,那么我们就需要监听 uni-appswiper 的滑动事件。
在 uni-appswiper 上,我们可以使用 swiper-change 事件来监听轮播图切换事件,其中 detail 参数中包含了当前的 current 值,表示当前轮播图显示的是第几个 item。
<uni-swiper :autoplay="true" :interval="3000" @swiper-change="swiperChange">
<uni-swiper-item v-for="(item, index) in list" :key="index">
<img :src="item.imgUrl" />
</uni-swiper-item>
</uni-swiper>
swiperChange(event) {
if (this.list.length - 1 === event.detail.current) {
this.$refs.swiper.autoplay = false;
setTimeout(() => {
this.$refs.swiper.autoplay = true;
this.$refs.swiper.current = 0;
}, 500);
}
}
三、uni-appswiper千叶图
在网站或app页面中,我们会经常看到千叶图的效果,那么如何使用 uni-appswiper 来实现千叶图呢?其实只需要通过设置 uni-appswiper-item 的 transform 属性即可。
<uni-swiper @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
<uni-swiper-item v-for="(item, index) in list" :key="index" ref="swiperItem">
<img :src="item.imgUrl" />
</uni-swiper-item>
</uni-swiper>
touchstart(event) {
this.startY = event.changedTouches[0].clientY;
this.startTime = new Date().getTime();
},
touchmove(event) {
this.moveY = event.changedTouches[0].clientY - this.startY;
this.$refs.swiperItem[this.currentIndex].style.transform = `rotateY(${this.moveY / 4}deg)`
},
touchend(event) {
this.endTime = new Date().getTime();
if (this.endTime - this.startTime < 300) {
if (this.moveY > 30) {
this.preItem();
} else if (this.moveY < -30) {
this.nextItem();
}
} else {
this.changeItem();
}
this.moveY = 0;
this.$refs.swiperItem[this.currentIndex].style.transform = '';
}
四、uni-appswiper做图文框
对于轮播图来说,除了显示图片之外,有时候我们还需要在图片下方添加一些文字描述。那么如何在 uni-appswiper 中做到这一点呢?只需在 uni-appswiper-item 内部加入图片和文字的容器即可。
<uni-swiper>
<uni-swiper-item v-for="(item, index) in list" :key="index">
<div>
<img :src="item.imgUrl" />
<div>
<p>{{item.title}}</p>
<p>{{item.desc}}</p>
</div>
</div>
</uni-swiper-item>
</uni-swiper>
五、uni-appswiper点击事件无效
在 uni-app 中,如果我们使用 uni-appswiper 来显示图片后,此时发现点击图片没有任何响应,这是因为 uni-appswiper 默认是禁止了用户的点击事件,可以通过设置 uni-appswiper 的 disable-touch 属性来控制是否禁用点击事件。
<uni-swiper :disable-touch="false">
<uni-swiper-item v-for="(item, index) in list" :key="index">
<img :src="item.imgUrl" @click="clickHandler(index)" />
</uni-swiper-item>
</uni-swiper>
六、uni-appswiper滑动流畅
在 uni-app 中,我们可以通过 swiper-listener 组件来监听轮播图的切换事件,进而实现更加流畅的滑动效果。
<template>
<swiper-listener @change="changeHandler">
<swiper-item v-for="(item, index) in list" :key="index">
<img :src="item.imgUrl" />
</swiper-item>
</swiper-listener>
</template>
<script>
import SwiperListener from 'uni-app-swiper-listener'
export default {
components: {
SwiperListener
},
data() {
return {
list: [
{imgUrl: '1.jpg'},
{imgUrl: '2.jpg'},
{imgUrl: '3.jpg'}
],
currentIndex: 0
}
},
methods: {
changeHandler(currentIndex) {
this.currentIndex = currentIndex;
}
}
}
</script>
七、uni-appswiper无限滑动加载
在一些需要无限滑动的场景下,我们可以借助 uni-app-swiper 的自定义 Events 来实现无限滑动加载的效果。
<template>
<swiper-listener @change="changeHandler" @refresher="refresherHandler">
<swiper-item v-for="(item, index) in list.slice(0, pageSize)" :key="index">
<img :src="item.imgUrl" />
</swiper-item>
</swiper-listener>
</template>
<script>
import SwiperListener from 'uni-app-swiper-listener'
export default {
components: {
SwiperListener
},
data() {
return {
list: [
{imgUrl: '1.jpg'},
{imgUrl: '2.jpg'},
{imgUrl: '3.jpg'},
...
],
currentIndex: 0,
pageSize: 3
}
},
methods: {
changeHandler(currentIndex) {
if (currentIndex === this.list.length - 1) {
this.pageSize += 3;
this.$nextTick(() => {
this.$refs.swiperListener.refresh();
});
}
},
refresherHandler(refresherTrigger) {
setTimeout(() => {
this.pageSize += 3;
this.$refs.swiperListener.refresh();
refresherTrigger();
uni.showToast({
title: '刷新成功',
duration: 2000
});
}, 1500);
}
}
}
</script>