uni-app x开发商城系统，Swiper 轮播图

一、概述

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

• 自定义指示器模式，可配置指示器样式
• 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/

 

所以在代码中，使用的就是这个网站的图片，非常方便。