该组件一般用于导航轮播，广告展示等场景,可开箱即用，具有如下特点：
- 自定义指示器模式，可配置指示器样式
- 3D轮播图效果，满足不同的开发需求
- 可配置显示标题，涵盖不同的应用场景
- 具有设置加载状态和嵌入视频的能力，功能齐全丰富
#平台差异说明
| 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
#指定类型 2.0.30
默认会根据链接自动判断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-是否衔接滑动，即到最后一张时，是否可以直接转到第一张
