详细分析Uniapp中的轮播图基本知识(附Demo)

news/2024/10/4 3:18:32/

目录

  • 前言
  • 1. 基本知识
  • 2. Demo
    • 2.1 基本
    • 2.2 自定义分页
    • 2.3 自定义动画
  • 3. 扩展

前言

先看代码示例:

实现了一个带有分页指示器的轮播图组件

<template><view class="work-container"><!-- 轮播图 --><uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content"><swiper class="swiper-box" :current="current" @change="changeSwiper" autoplay interval="3000"><swiper-item v-for="(item, index) in data" :key="index"><view class="swiper-item" @click="clickBannerItem(item)"><image :src="item.image" mode="aspectFill" :draggable="false" /></view></swiper-item></swiper></uni-swiper-dot></view>
</template><script>javascript">
export default {data() {return {current: 0,data: [{ image: '/static/images/banner/banner01.jpg' },{ image: '/static/images/banner/banner02.jpg' },{ image: '/static/images/banner/banner03.jpg' }]};},methods: {clickBannerItem(item) {console.info('Banner item clicked:', item);},changeSwiper(e) {this.current = e.detail.current;}}
};
</script><style lang="scss">.swiper-box {height: 150px;}.swiper-item {display: flex;justify-content: center;align-items: center;color: #fff;height: 300rpx;line-height: 300rpx;}@media screen and (min-width: 500px) {.uni-swiper-dot-box {width: 400px;margin: 0 auto;margin-top: 8px;}}
</style>

截图如下:

在这里插入图片描述

1. 基本知识

uni-app 中,<swiper> 组件是一个用于轮播图的基础组件,类似于其他前端框架中的 carousel

配合 <swiper-item>,可以实现多个页面、图片或内容的循环切换
uni-swiper-dot 组件用于为轮播图提供分页指示器(即小点)

<swiper> 组件:用于创建轮播图的组件

主要有以下几个常用属性:

  • current:当前显示的 swiper-item 的索引
  • autoplay:是否自动切换,布尔值
  • interval:自动切换的时间间隔,单位为毫秒
  • duration:滑动动画的时长,单位为毫秒
  • circular:是否采用衔接滑动,即是否循环播放
  • indicator-dots:是否显示面板指示点

事件

  • change:轮播图滑动时触发,返回当前页的索引

<swiper-item> 组件:是 swiper 的子组件,用于定义每个可滑动的内容块
有一个 key 属性,用于唯一标识每一个 swiper-item

<uni-swiper-dot> 组件:一个为 swiper 提供分页指示器(小圆点)的组件,是 uni-app 的扩展组件
通过将分页指示器与 swiper 组件结合,可以为用户提供视觉提示,了解当前处于第几页

2. Demo

2.1 基本

简单的轮播图,包含 3 个图片项,开启了自动播放和指示点,间隔为 3 秒,动画时长为 500 毫秒

<template><swiperindicator-dotsautoplayinterval="3000"duration="500"><swiper-item><view class="swiper-item"><image src="https://example.com/image1.jpg" mode="aspectFill"></image></view></swiper-item><swiper-item><view class="swiper-item"><image src="https://example.com/image2.jpg" mode="aspectFill"></image></view></swiper-item><swiper-item><view class="swiper-item"><image src="https://example.com/image3.jpg" mode="aspectFill"></image></view></swiper-item></swiper>
</template><style scoped>
.swiper-item {width: 100%;height: 300px;
}
</style>

2.2 自定义分页

结合 uni-swiper-dot 实现自定义分页指示器

使用了 uni-swiper-dot 组件,自定义了轮播图的分页指示器。这里通过 @change 监听 swiper 的切换事件,动态更新当前页索引

<template><uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="currentIndex" field="content"><swiper class="swiper-box" :current="currentIndex" @change="changeSwiper" autoplay interval="3000"><swiper-item v-for="(item, index) in data" :key="index"><view class="swiper-item" @click="clickBannerItem(item)"><image :src="item.image" mode="aspectFill" /></view></swiper-item></swiper></uni-swiper-dot>
</template><script>javascript">
export default {data() {return {currentIndex: 0,data: [{ image: 'https://example.com/image1.jpg', content: 'Image 1' },{ image: 'https://example.com/image2.jpg', content: 'Image 2' },{ image: 'https://example.com/image3.jpg', content: 'Image 3' },],};},methods: {changeSwiper(e) {this.currentIndex = e.detail.current;},clickBannerItem(item) {console.log('Banner item clicked:', item);},},
};
</script><style scoped>
.swiper-box {height: 300px;
}
.swiper-item {display: flex;justify-content: center;align-items: center;height: 100%;
}
</style>

2.3 自定义动画

自定义了指示点的颜色,包括默认颜色和当前页的激活颜色,并且开启了 circular 选项实现循环播放

<template><swiperautoplayinterval="4000"duration="600"indicator-dotsindicator-color="rgba(255,255,255,0.6)"indicator-active-color="rgba(255,0,0,1)"circular><swiper-item v-for="(item, index) in images" :key="index"><view class="swiper-item"><image :src="item" mode="aspectFill"></image></view></swiper-item></swiper>
</template><script>javascript">
export default {data() {return {images: ['https://example.com/image1.jpg','https://example.com/image2.jpg','https://example.com/image3.jpg',],};},
};
</script><style scoped>
.swiper-item {height: 250px;background-color: #ccc;
}
</style>

3. 扩展

常见的功能扩展如下:

手动切换到指定页面,修改 current 变量可以手动切换到某一页

<template><swiper :current="current" @change="changeSwiper"><!-- swiper-item content here --></swiper><button @click="current = 1">切换到第二页</button>
</template><script>javascript">
export default {data() {return {current: 0,};},methods: {changeSwiper(e) {this.current = e.detail.current;},},
};
</script>

自定义指示器样式,通过 indicator-color 和 indicator-active-color 可以修改指示器颜色

<swiper :indicator-dots="true" indicator-color="rgba(0,0,0,.3)" indicator-active-color="#007aff"><!-- swiper-item content here -->
</swiper>

http://www.ppmy.cn/news/1527077.html

相关文章

【电脑组装】✈️从配置拼装到安装系统组装自己的台式电脑

目录 &#x1f378;前言 &#x1f37b;一、台式电脑基本组成 &#x1f37a;二、组装 &#x1f379;三、安装系统 &#x1f44b;四、系统设置 &#x1f440;五、章末 &#x1f378;前言 小伙伴们大家好&#xff0c;上篇文章分享了在平时开发的时候遇到的一种项目整合情况&…

TCP/IP网络编程概念及Java实现TCP/IP通讯Demo

背景 在当今数字化的世界中&#xff0c;网络通信是连接各种设备和系统的关键。TCP/IP协议作为互联网通信的基石&#xff0c;被广泛应用于各种网络场景。了解TCP/IP网络编程的概念&#xff0c;并掌握如何在Java中实现TCP/IP通讯&#xff0c;对于开发人员来说是非常重要的。 TC…

webpack打包原理

目录 1、搭建结构&#xff0c;读取配置参数2、配置参数对象初始化 Compiler&#xff08;new Compiler(webpackOptions)&#xff09;3、挂载配置文件中的插件&#xff0c;4、执行Compiler 中的 run 方法进行编译5、根据配置文件中的entry 配置项找到所有的入口6、从入口文件出发…

JavaScript 基础 - 第16天_AJAX入门

文章目录 Day01_Ajax入门目录学习目标01.AJAX 概念和 axios 使用目标讲解小结 02.认识 URL目标讲解小结 03.URL 查询参数目标讲解小结 04.案例-查询-地区列表目标讲解小结 05.常用请求方法和数据提交目标讲解小结 06.axios 错误处理目标讲解小结 07.HTTP 协议-请求报文目标讲解…

椋鸟C++笔记#7:标准模板库STL初识

文章目录 标准模板库&#xff08;Standard Template Library&#xff09;STL的版本P.J.版RW版SGI版 STL的组成部分 萌新的学习笔记&#xff0c;写错了恳请斧正。 标准模板库&#xff08;Standard Template Library&#xff09; 标准模板库STL&#xff0c;是C标准库的一个非常重…

Snowflake 如何通过 Apache Iceberg 和 Polaris 为大数据的未来提供动力

Snowflake 的使命是让每个组织都成为数据驱动型组织。凭借围绕 Apache Iceberg 的最新创新和 Polaris 的推出,这家数据云公司使开发人员、工程师和架构师能够比以往任何时候都更快、更轻松地利用大数据获得变革性的业务见解。 将开放标准引入数据云 Snowflake 战略的核心是采…

教师薪酬管理系统的设计与实现

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;老师信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能满足广…

HarmonyOS4升级到Harmonyos Next(Api 11)系列教程

目前此教程基于HarmonyOS NEXT Developer Preview、OpenHarmony&#xff08;Api 11&#xff09;讲解&#xff0c;兼容Api 12&#xff0c;HarmonyOS 5&#xff08;HarmonyOS Next&#xff09;正式发布后新增的Api还会在第一时间更新。 HarmonyOS NEXT和HarmonyOS 4的基本语法都是…