效果

 

技术选取

前端框架用的是vue3，使用的组件库为element-plus以及vant4

引入element-plus和vant4

安装element-plus

  cnpm install element-plus --save

 安装按需导入

  cnpm install -D unplugin-vue-components unplugin-auto-import

安装Vant

 cnpm i vant

按需加载插件

cnpm i unplugin-vue-components -D

修改vite.config.js配置按需加载

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver, VantResolver} from 'unplugin-vue-components/resolvers'

 plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver(), VantResolver()]
        }),


    ],

vant4的Swipe 轮播

基础用法

<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>

<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>

API

Swipe Props

参数	说明	类型	默认值
autoplay	自动轮播间隔，单位为 ms	number | string	-
duration	动画时长，单位为 ms	number | string	500
initial-swipe	初始位置索引值	number | string	0
width	滑块宽度，单位为 px	number | string	auto
height	滑块高度，单位为 px	number | string	auto
loop	是否开启循环播放	boolean	true
show-indicators	是否显示指示器	boolean	true
vertical	是否为纵向滚动	boolean	false
touchable	是否可以通过手势滑动	boolean	true
stop-propagation	是否阻止滑动事件冒泡	boolean	true
lazy-render	是否延迟渲染未展示的轮播	boolean	false
indicator-color	指示器颜色	string	#1989fa

Swipe Events

事件名	说明	回调参数
change	每一页轮播结束后触发	index: number
drag-start v4.0.9	当用户开始拖动轮播组件时触发	{ index: number }
drag-end v4.0.9	当用户结束拖动轮播组件时触发	{ index: number }

SwipeItem Events

事件名	说明	回调参数
click	点击时触发	event: MouseEvent

Swipe 方法

通过 ref 可以获取到 Swipe 实例并调用实例方法，详见组件实例方法。

方法名	说明	参数	返回值
prev	切换到上一轮播	-	-
next	切换到下一轮播	-	-
swipeTo	切换到指定位置	index: number, options: SwipeToOptions	-
resize	外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘	-	-

类型定义

组件导出以下类型定义：

import type { SwipeProps, SwipeInstance, SwipeToOptions } from 'vant';

SwipeInstance 是组件实例的类型，用法如下：

import { ref } from 'vue';
import type { SwipeInstance } from 'vant';

const swipeRef = ref<SwipeInstance>();

swipeRef.value?.next();

SwipeToOptions 格式

名称	说明	类型
immediate	是否跳过动画	boolean

Swipe Slots

名称	说明	参数
default	轮播内容	-
indicator	自定义指示器	{ active: number, total: number }

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--van-swipe-indicator-size	6px	-
--van-swipe-indicator-margin	var(--van-padding-sm)	-
--van-swipe-indicator-active-opacity	1	-
--van-swipe-indicator-inactive-opacity	0.3	-
--van-swipe-indicator-active-background	var(--van-primary-color)	-
--van-swipe-indicator-inactive-background	var(--van-border-color)	-

我的代码 

<template>
  <van-swipe  :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="(item,index) in sliderList.list" :key="index">
      <el-image :fit="fill" :src="item"/>
    </van-swipe-item>
  </van-swipe>
</template>

<script setup>
import {reactive} from "vue";
//轮播图片数组600-250
const sliderList = reactive({
  list: [
    "http://ip:8888/group1/M00/00/00/rBoX5mR3blSAKeHfAADogBdgrh8622.png",
    "http://ip:8888/group1/M00/00/00/rBoX5mR1i1iAYkwkAAQrnM0oH_U695.png",
    "http://ip:8888/group1/M00/00/00/rBoX5mR1i_eATaX7AAHRPx-qWaI436.png",
  ]
})
</script>

<style scoped>

</style>