移动端的轮播图-Toy模板网

这篇具有很好参考价值的文章主要介绍了移动端的轮播图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果

移动端的轮播图

技术选取

前端框架用的是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 组件。文章来源地址https://www.toymoban.com/news/detail-475394.html

名称默认值描述

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

参数	说明	类型	默认值
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`

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

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

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

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

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

名称	默认值	描述
--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>

到了这里，关于移动端的轮播图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！