效果

 

技术选取

前端框架用的是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 轮播

基础用法

  1
  2
  3
  4



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

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();

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)	–

我的代码 

  
    
      
    
  



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",
  ]
})

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net