一、概述
该组件一般用于导航轮播，广告展示等场景,可开箱即用，具有如下特点：
- 自定义指示器模式，可配置指示器样式
- 3D轮播图效果，满足不同的开发需求
- 可配置显示标题，涵盖不同的应用场景
- 具有设置加载状态和嵌入视频的能力，功能齐全丰富
官方文档：https://uview-plus.jiangruyi.com/components/swiper.html
二、实现轮播效果
官方演示效果地址：https://uview-plus.jiangruyi.com/h5/#/pages/componentsC/swiper/swiper
这里使用比较主流的，自定义指示器
可以看到图片中间向下的地方，有几个圆点。
完整代码如下：
<template><view><!-- 轮播区域 --><up-swiper :list="swiper" keyName="img" indicator indicatorMode="dot" circular></up-swiper></view> </template><script>export default {data() {return {swiper: [{id: 1,url: 'https://picsum.photos',img: 'https://picsum.photos/600/400?random=1'}, {id: 2,url: 'https://picsum.photos',img: 'https://picsum.photos/600/400?random=2'}, {id: 3,url: 'https://picsum.photos',img: 'https://picsum.photos/600/400?random=3'},{id: 4,url: 'https://picsum.photos',img: 'https://picsum.photos/600/400?random=4'}],}},methods: {}} </script><style></style>
编译运行，效果如下：
代码解释：
<up-swiper :list="swiper" keyName="img" indicator indicatorMode="dot" circular></up-swiper>
先来看这一行
:list，轮播图数据，必须是一个列表。
keyName，list数组中指定对象的目标属性名，必须是url地址。
indicator，是否显示面板指示器，默认显示。如果设置为:indicator="false"，就会不显示。
indicatorMode，指示器模式，默认为line，可选值dot。默认横向显示不好看，所以设置为dot，圆点显示。
circular，是否衔接滑动，即到最后一张时，是否可以直接转到第一张。默认就是一直循环的，感觉没啥区别。
Picsum.photos
Picsum.photos 是一个给用户提供接口来获取图片的服务。在开发网页中我们常常需要放入图片来进行测试。借助这个服务，就可以在 <img> 标签的 src 中引入根据它的规则制定的 URL ，从而获得一个随机图片。此外，它还提供了一系列参数如高度宽度、模糊度、灰度等，让你可以更精确地生成想要的图片。
官方地址：https://picsum.photos/
所以在代码中，使用的就是这个网站的图片，非常方便。