uniapp 轮播图(含组件封装,自动注册全局组件)

效果预览

在这里插入图片描述

组件封装

src\components\SUI_Swiper.vue

可参考官网配置更多属性

  • swiper
  • navigator
<script setup lang="ts">
import { ref } from 'vue'
defineProps({config: Object,
})const activeIndex = ref(0)
const change: UniHelper.SwiperOnChange = (e) => {activeIndex.value = e.detail.current
}
</script><template><view class="carousel"><swiper@change="change":circular="config?.circular || true":autoplay="config?.autoplay || false":interval="config?.interval || 3000"><swiper-item v-for="(item, index) in config?.itemList" :key="index"><navigator:url="item.url":open-type="item.openType || 'navigate'"hover-class="none"class="navigator"><image mode="aspectFill" class="image" :src="item.src"></image></navigator></swiper-item></swiper><!-- 指示点 --><view class="indicator"><textv-for="(item, index) in config?.itemList":key="item"class="dot":class="{ active: index === activeIndex }"></text></view></view>
</template><style lang="scss">
/* 轮播图 */
.carousel {height: 280rpx;position: relative;overflow: hidden;transform: translateY(0);background-color: #efefef;.indicator {position: absolute;left: 0;right: 0;bottom: 16rpx;display: flex;justify-content: center;.dot {width: 30rpx;height: 6rpx;margin: 0 8rpx;border-radius: 6rpx;background-color: rgba(255, 255, 255, 0.4);}.active {background-color: #fff;}}.navigator,.image {width: 100%;height: 100%;}
}
</style>

自动注册全局组件

在 src\pages.json 中添加

      // 自动导入src/components 目录中以 SUI_开头的组件"^SUI_(.*)": "@/components/SUI_$1.vue"

完整范例代码如下:
src\pages.json

  // 组件自动导入"easycom": {"autoscan": true,"custom": {// uni-ui 规则如下配置"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",// 自动导入src/components 目录中以 SUI_开头的组件"^SUI_(.*)": "@/components/SUI_$1.vue"}},

使用组件

  <SUI_Swiper :config="swiperConfig" />
const swiperConfig = {autoplay: true,interval: 3000,itemList: [{// 跳转到页面 '/pages/login/login'url: '/pages/login/login',src: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg',},{// 跳转到tab页签 '/pages/my/my'openType: 'switchTab',url: '/pages/my/my',src: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_2.jpg',},],
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/168031.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WPF面试题入门篇

入门篇[2] 1. 谈谈什么是WPF&#xff1f; WPF&#xff08;Windows Presentation Foundation&#xff09;是微软公司开发的一种用于创建Windows应用程序的用户界面框架。它是.NET Framework的一部分&#xff0c;提供了一种基于XAML&#xff08;可扩展应用程序标记语言&#xf…

【算法技巧】位运算

目录 1.概述2.位运算技巧2.1.与运算 (&)2.1.1.判断奇偶性2.1.2.判断一个数是否是 2 的幂2.1.3.将英文字母转换为大写2.1.4.代替取模运算 2.2.或运算 (|)2.2.1.将英文字母转换为小写 2.3.异或运算 (^)2.3.1.消除成对相同的数2.3.2.不使用临时变量来交换两个数2.3.3.进行英文…

一起学docker系列之八使用 Docker 安装配置 MySQL

目录 前言步骤 1&#xff1a;拉取 MySQL 镜像步骤 2&#xff1a;运行 MySQL 容器步骤 3&#xff1a;检查容器状态步骤 4&#xff1a;进入 MySQL 容器步骤 5&#xff1a;配置 MySQL 字符编码步骤 6&#xff1a;重启 MySQL 容器步骤 7&#xff1a;测试字符编码步骤 8&#xff1a;…

防止应用程序截屏(容器式,防止极域电子教室和录屏软件录制)

核心原理、实现目的 1、使用Panel容器将外部窗口嵌入自己写的程序 2、使用防止截屏的函数来对窗口透明&#xff0c;这可以使本窗口内所有窗口在录屏软件上消失 3、解放&#xff0c;抓取&#xff0c;存储句柄&#xff0c;实现摆脱录屏&#xff08;极域监控&#xff09; 程序…

用 Addon 增强 Node.js 和 Electron 应用的原生能力

前言 Node.js Addon 是 Node.js 中为 JavaScript 环境提供 C/C 交互能力的机制。其形态十分类似 Java 的 JNI&#xff0c;都是通过提供一套 C/C SDK&#xff0c;用于在 C/C 中创建函数方法、进行数据转换&#xff0c;以便 JavaScript / Java 等语言进行调用。这样编写的代码通常…

Spring - Mybatis-设计模式总结

Mybatis-设计模式总结 1、Builder模式 2、工厂模式 3、单例模式 4、代理模式 5、组合模式 6、模板方法模式 7、适配器模式 8、装饰者模式 9、迭代器模式 虽然我们都知道有26个设计模式&#xff0c;但是大多停留在概念层面&#xff0c;真实开发中很少遇到&#xff0c;…

【数据结构】时间和空间复杂度

马上就要进入到数据结构的学习了 &#xff0c;我们先来了解一下时间和空间复杂度&#xff0c;这也可以判断我们的算法是否好坏&#xff1b; 如何衡量一个算法的好坏&#xff1f; 就是看它的算法效率 算法效率 算法效率分析分为两种&#xff1a;第一种是时间效率&#xff0c;第…

C++ Qt QVariant类型使用介绍与代码演示

作者:令狐掌门 技术交流QQ群:675120140 csdn博客:https://mingshiqiang.blog.csdn.net/ 文章目录 一、QVariant基本用法二、自定义类型使用QVariant三、其它用法赋值修改和替换值使用`QVariant::setValue()`设置值复制构造函数和赋值操作比较使用`QVariant::swap()`交换值使…

CVE-2023-22515:Atlassian Confluence权限提升漏洞复现 [附POC]

文章目录 Atlassian Confluence权限提升(CVE-2023-22515)漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 Atlassian Confluence权限提升(CVE-2023-22515)漏洞复现 [附POC] 0x01 前言 免责声明&…

vue中下载文件后无法打开的坑

今天在项目开发的时候临时要添加个导出功能我就写了一份请求加导出得代码&#xff0c; 代码&#xff1a; //导出按钮放开exportDutySummarizing (dataRangeInfo) {const params {departmentName: dataRangeInfo.name,departmentQode: dataRangeInfo.qode}//拼接所需得urlcons…

UserRole

Qt::UserRole 是 Qt::ItemDataRole 枚举中的一个成员&#xff0c;用于表示自定义数据角色&#xff08;Data Role&#xff09;的起始值。 在 Qt 中&#xff0c;Qt::ItemDataRole 枚举用于标识项&#xff08;Item&#xff09;中不同类型的数据。这些数据角色包括 Qt::DisplayRol…

目标检测YOLO系列从入门到精通技术详解100篇-【目标检测】红外热成像

目录 前言 知识储备 红外热成像仪基础知识 算法原理 红外热成像探测距离 红外图像增强

第一百七十八回 介绍一个三方包组件:SlideSwitch

文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"如何创建垂直方向的Switch"相关的内容&#xff0c;本章回中将 介绍SlideSwitch组件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们…

多功能智能灯杆主要功能有哪些?

多功能智能灯杆这个词相信大家都不陌生&#xff0c;最近几年多功能智能灯杆行业发展迅速&#xff0c;迅速取代了传统路灯&#xff0c;那么多功能智能灯杆相比传统照明路灯好在哪里呢&#xff0c;为什么大家都选择使用叁仟智慧多功能智能灯杆呢&#xff1f;所谓多功能智能灯杆着…

【libGDX】Mesh纹理贴图

1 前言 纹理贴图的本质是将图片的纹理坐标与模型的顶点坐标建立一一映射关系。纹理坐标的 x、y 轴正方向分别朝右和朝下&#xff0c;如下。 2 纹理贴图 本节将使用 Mesh、ShaderProgram、Shader 实现纹理贴图&#xff0c;OpenGL ES 的实现见博客 → 纹理贴图。 DesktopLauncher…

超级应用平台(HAP)起航

各位明道云用户和伙伴&#xff0c; 今天&#xff0c;我们正式发布明道云10.0版本。从这个版本开始&#xff0c;我们将产品名称正式命名为超级应用平台&#xff08;Hyper Application Platform, 简称HAP&#xff09;。我们用“超级”二字表达产品在综合能力方面的突破&#xff…

清华系下一代 LCM

LCM LoRA模型是一种创新的深度学习模型&#xff0c;它通过特殊的技术手段&#xff0c;显著提高了图像生成的效率。这种模型特别适用于需要快速生成高质量图像的场景&#xff0c;如艺术创作、实时图像处理等。 GitHub - luosiallen/latent-consistency-model: Latent Consistenc…

视频监控中的智能算法与计算机视觉技术

智能视频监控是一种基于人工智能技术的监控系统&#xff0c;它能够通过对图像和视频数据进行分析&#xff0c;自动识别目标物体、判断其行为以及进行异常检测等功能&#xff0c;从而实现对场景的智能化监管。以下是常见的一些用于智能视频监控的算法&#xff1a; 1、人脸识别技…

RabbitMQ简易安装

一般来说安装 RabbitMQ 之前要安装 Erlang &#xff0c;可以去Erlang官网下载。接着去RabbitMQ官网下载安装包&#xff0c;之后解压缩即可。 Erlang官方下载地址&#xff1a;Downloads - Erlang/OTP RabbitMQ官方下载地址&#xff1a;Downloading and Installing RabbitMQ —…

org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder

密码&#xff0c;加密&#xff0c;解密 spring-security-crypto-5.7.3.jar /** Copyright 2002-2011 the original author or authors.** Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with t…