该组件一般用于导航轮播，广告展示等场景,可开箱即用，具有如下特点：
| App（vue） | App（nvue） | H5 | 小程序 |
|---|---|---|---|
| √ | √ | √ | √ |
通过list参数传入轮播图列表值，该值为一个数组，键值为图片路径，例如：
<template>
<u-swiper
:list="list1"
@change="change"
@click="click"
></u-swiper>
</template>
<script>
export default {
data() {
return {
list1: [
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
]
}
}
}
</script>
copy
添加showTitle属性以展示标题，此时list的参数应为一个对象：例如：
（请注意：您期望使用对象作为参数时，需要配置u-swiper组件的keyName参数为您当前对象的图片key值）如：keyName="image"
<template>
<u-swiper
:list="list2"
keyName="image"
showTitle
:autoplay="false"
circular
></u-swiper>
</template>
<script>
export default {
data() {
return {
list2: [{
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
title: '昨夜星辰昨夜风，画楼西畔桂堂东',
},{
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
title: '身无彩凤双飞翼，心有灵犀一点通'
},{
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}],
}
}
}
</script>
copy
通过indicator属性添加指示器，例如：
<template>
<u-swiper
:list="list3"
indicator
indicatorMode="line"
circular
></u-swiper>
</template>
<script>
export default {
data() {
return {
list3: [
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
],
}
}
}
</script>
copy
通过添加loading属性达到加载中的状态，例如：
您也可以动态的来控制加载状态，比如：:loading='loading'
<template>
<u-swiper
:list="list3"
loading
></u-swiper>
</template>
<script>
export default {
data() {
return {
list3: [
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
],
}
}
}
</script>
copy
我们提供了嵌入视频的能力，为避免资源浪费，在您切换轮播的时候视频会停止播放，你可以设置poster指定视频封面，案例如下：
<template>
<u-swiper
:list="list4"
keyName="url"
:autoplay="false"
></u-swiper>
</template>
<script>
export default {
data() {
return {
list4: [{
url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
title: '昨夜星辰昨夜风，画楼西畔桂堂东',
poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
},{
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
title: '身无彩凤双飞翼，心有灵犀一点通'
},{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}],
}
}
}
</script>
copy
默认会根据链接自动判断swiper-item类型，但是在极端情况下可能会不准确，所以我们提供了指定item的类型，通过设置type为video或image即可：
<template>
<u-swiper
:list="list4"
keyName="url"
:autoplay="false"
></u-swiper>
</template>
<script>
export default {
data() {
return {
list4: [{
url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
title: '昨夜星辰昨夜风，画楼西畔桂堂东',
poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
type: 'video'
},{
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
title: '身无彩凤双飞翼，心有灵犀一点通',
type: 'image'
},{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}],
}
}
}
</script>
copy
如您需要以指示点或数字形式来自定义指示器，请参考如下案例：
<template>
<view class="u-demo-block">
<text class="u-demo-block__title">自定义指示器</text>
<u-swiper
:list="list5"
@change="e => current = e.current"
:autoplay="false"
>
<view
slot="indicator"
class="indicator"
>
<view
class="indicator__dot"
v-for="(item, index) in list5"
:key="index"
:class="[index === current && 'indicator__dot--active']"
>
</view>
</view>
</u-swiper>
<u-gap
bgColor="transparent"
height="15"
></u-gap>
<u-swiper
:list="list6"
@change="e => currentNum = e.current"
:autoplay="false"
indicatorStyle="right: 20px"
>
<view
slot="indicator"
class="indicator-num"
>
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
</view>
</u-swiper>
</view>
</template>
<script>
export default {
data() {
return {
list5: [
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
],
list6: [
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
]
}
}
}
</script>
<style lang="scss">
.indicator {
@include flex(row);
justify-content: center;
&__dot {
height: 6px;
width: 6px;
border-radius: 100px;
background-color: rgba(255, 255, 255, 0.35);
margin: 0 5px;
transition: background-color 0.3s;
&--active {
background-color: #ffffff;
}
}
}
.indicator-num {
padding: 2px 0;
background-color: rgba(0, 0, 0, 0.35);
border-radius: 100px;
width: 35px;
@include flex;
justify-content: center;
&__text {
color: #FFFFFF;
font-size: 12px;
}
}
</style>
copy
在实际开发中，普通的轮播或许不能满足您的开发需求，swiper组件提供了卡片式轮播的api，您可以参考以下案例实现此功能
<template>
<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
<view class="u-demo-block">
<text class="u-demo-block__title">卡片式</text>
<u-swiper
:list="list3"
previousMargin="30"
nextMargin="30"
circular
:autoplay="false"
radius="5"
bgColor="#ffffff"
></u-swiper>
</view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
list3: [
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
],
}
}
}
</script>
copy
autoplay-是否自动轮播，默认为trueinterval-前后两张图自动轮播的时间间隔duration-切换一张轮播图所需的时间circular-是否衔接滑动，即到最后一张时，是否可以直接转到第一张