uView Swiper 轮播图

该组件一般用于导航轮播，广告展示等场景,可开箱即用，具有如下特点：

自定义指示器模式，可配置指示器样式
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"indicatorindicatorMode="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"><viewslot="indicator"class="indicator"><viewclass="indicator__dot"v-for="(item, index) in list5":key="index":class="[index === current && 'indicator__dot--active']"></view></view></u-swiper><u-gapbgColor="transparent"height="15"></u-gap><u-swiper:list="list6"@change="e => currentNum = e.current":autoplay="false"indicatorStyle="right: 20px"><viewslot="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