uniapp-轮播图点击预览功能

实现效果

点击后打开预览图

实现代码

<swiper v-if="this.bannerList.length >= 1" class="swiper" autoplay="true" duration="500" interval="2000" @change="changeSwiper">
	<swiper-item class="swiper-item" v-for="(item, index) in bannerList" :key="index">
		<image class="img" :src="baseUrl+item" mode="" @click="handleBanner(index)"></image>
	</swiper-item>
</swiper>

methods: {
	handleBanner(index) {
		uni.previewImage({
			current: index, //预览图片的下标
			urls: this.newBannerList //预览图片的地址,必须要数组形式
		})
	},
},

因为我的 bannerList 数组内是存的去除了基地址的地址 所以直接写在urls 后是无法显示的 这里需要的是全路径

所以在created 或mounted的钩子内去加上转换的代码

this.newBannerList = newList.map(item => this.baseUrl + item);

this.baseUrl 是基地址

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Apache Airflow (九) :Airflow Operators及案例之BashOperator及调度Shell命令及脚本

&#x1f3e1; 个人主页&#xff1a;IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 &#x1f6a9; 私聊博主&#xff1a;加入大数据技术讨论群聊&#xff0c;获取更多大数据资料。 &#x1f514; 博主个人B栈地址&#xff1a;豹哥教你大数据的个人空间-豹…

248: vue+openlayers 以静态图片作为底图,并在上面绘制矢量多边形

第248个 点击查看专栏目录 本示例是演示如何在vue+openlayers项目中以静态图片作为底图,并在上面绘制矢量多边形。这里主要通过pixels的坐标作为投射,将静态图片作为底图,然后通过正常的方式在地图上显示多边形。注意的是左下角为[0,0]。 直接复制下面的 vue+openlayers源代…

【蓝桥杯省赛真题01】C++水下探测器 第十届蓝桥杯中小学生创意编程大赛C++编程比赛省赛真题解析

目录 C/C++水下探测器 一、题目要求 1、编程实现 2、输入输出 二、算法分析

The import xxx.xxx.xxxx is never used

CTRL SHIFT O 就完成了&#xff0c;懒人&#xff0c;代码没洁癖啊&#xff0c;几千上万的代码没用的。

再学动态规划

先用一张图来理一下动态规划大纲 参考&#xff1a;https://www.zhihu.com/question/291280715/answer/1007691283 动态规划五个步骤 参考&#xff1a;https://www.zhihu.com/question/25814123 ①判断题目能否用动规解法 ②确定状态 最后一步 子问题 ③转移方程 ④确定初始条…

SSL证书哪个品牌最好用?

现在市面上的SSL证书品牌有很多&#xff0c;选购SSL证书时有很多人并不是很清楚&#xff0c;因此有很多伙伴对于选择哪个SSL证书品牌而感到疑惑。今天JoySSL小编就专门介绍下哪些比较好用的SSL证书品牌。 SSL证书兼容性主要包含操作系统、浏览器、服务器三个方面&#xff0c;好…

Python----图像的手绘效果

图像的数组表示 图像是有规则的二维数据&#xff0c;可以用numpy 库将图像转换成数组对象 : from PIL import Image import numpy as np imnp.array(Image.open("D://np.jpg")) print(im.shape,im.dtype)结果&#xff1a; 图像转换对应的ndarray 类型是3 维数据&am…

OpenAI的Whisper蒸馏:速度提升6倍的Distil-Whisper

1 Distil-Whisper诞生 Whisper 是 OpenAI 研发并开源的一个自动语音识别&#xff08;ASR&#xff0c;Automatic Speech Recognition&#xff09;模型&#xff0c;他们通过从网络上收集了 68 万小时的多语言&#xff08;98 种语言&#xff09;和多任务&#xff08;multitask&am…

基于STM32的蓝牙低功耗(BLE)通信方案设计与实现

蓝牙低功耗&#xff08;Bluetooth Low Energy&#xff0c;简称BLE&#xff09;是一种能够在低功耗环境下实现无线通信的技术。在物联网应用中&#xff0c;BLE被广泛应用于传感器数据采集、健康监测设备、智能家居等领域。本文将基于STM32微控制器&#xff0c;设计并实现一个简单…

【FPGA】Verilog:升降计数器 | 波纹计数器 | 约翰逊计数器 | 实现 4-bit 升降计数器的 UP/DOWN

目录 Ⅰ. 理论部分 0x00 升降计数器&#xff08;UP DOWN Counter&#xff09; 0x01 波纹计数器&#xff08;Ripple Counter&#xff09; 0x02 约翰逊计数器&#xff08;Johnson Counter&#xff09; Ⅱ. 实践部分 0x00 实现&#xff1a;升降计数器&#xff08;4-bit&…

cvf_使用lora方法增强能力

cvf_使用lora方法增强能力 实验对比图最终代码简介详细解析实验对比图 最终代码 import paddle import numpy as np import pandas as pd from tqdm import tqdmclass FeedFroward(paddle.nn.Layer)

基于SDN技术构建多平面业务承载网络

随着企业数字化的浪潮席卷各个行业&#xff0c;传统网络架构面临着更为复杂和多样化的挑战。企业正在寻找一种全面适应数字化需求的网络解决方案。随着软件定义网络&#xff08;SDN&#xff09;的发展&#xff0c;“多业务SDN一张网”解决方案为企业提供了一种全新的网络架构&a…

python趣味编程-5分钟实现一个F1 赛车公路游戏(含源码、步骤讲解)

Python 中的 F1 赛车公路游戏及其源代码 F1 Race Road Game是用Python编程语言开发的,它是一个桌面应用程序。 这款 Python 语言的 F1 赛道游戏可以免费下载开源代码,它是为想要学习 Python 的初学者创建的。 该项目系统使用了 Pygame 和 Random 函数。 Pygame 是一组跨平…

Bert浅谈

优点 首先&#xff0c;bert的创新点在于利用了双向transformer&#xff0c;这就跟openai的gpt有区别&#xff0c;gpt是采用单向的transformer&#xff0c;而作者认为双向transformer更能够融合上下文的信息。这里双向和单向的区别在于&#xff0c;单向只跟当前位置之前的tocke…

Pandas+Matplotlib 数据分析

利用可视化探索图表 一、数据可视化与探索图 数据可视化是指用图形或表格的方式来呈现数据。图表能够清楚地呈现数据性质&#xff0c; 以及数据间或属性间的关系&#xff0c;可以轻易地让人看图释义。用户通过探索图&#xff08;Exploratory Graph&#xff09;可以了解数据的…

《视觉SLAM十四讲》-- 后端 2

文章目录 09 后端 29.1 滑动窗口滤波和优化9.1.1 实际环境下的 BA 结构9.1.2 滑动窗口法 9.2 位姿图9.2.1 位姿图的意义9.2.2 位姿图优化 09 后端 2 9.1 滑动窗口滤波和优化 9.1.1 实际环境下的 BA 结构 由于计算机算力的限制&#xff0c;我们必须控制 BA 的规模&#xff0c…

【2022改良版】学法减分助手PRO小程序源码

【2022改良版】学法减分助手PRO小程序源码 &#xff0c;交管推出个学法减分&#xff0c;每个驾驶员可以把被扣的6分&#xff0c;以看视频答题的形式学习回来&#xff0c;然后答题这个一共二十道题每道题60秒&#xff0c; 有好多人不会&#xff0c;用咱们的小程序就可以模拟练习…

gorm的简单操作

1. 什么是orm ORM全称是&#xff1a;Object Relational Mapping(对象关系映射)&#xff0c;其主要作用是在编程中&#xff0c;把面向对象的概念跟数据库中表的概念对应起来。举例来说就是&#xff0c;我定义一个对象&#xff0c;那就对应着一张表&#xff0c;这个对象的实例&a…

故障发现、定位提效超 70%,去哪儿可观测体系做了哪些优化?

一分钟精华速览 去哪儿网的原有监控系统在指标数量上展现出了强大实力——上亿指标量和百万级的告警量&#xff0c;但在故障数据方面却稍显不足——订单类故障平均发现时间长达 4 分钟&#xff0c;仅有 20%的订单类故障能在 1 分钟内被发现&#xff0c;近半数的故障处理时长超…

Jenkins自动化部署一个Maven项目

Jenkins自动化部署 提示&#xff1a;本教程基于CentOS Linux 7系统下进行 Jenkins的安装 1. 下载安装jdk11 官网下载地址&#xff1a;https://www.oracle.com/cn/java/technologies/javase/jdk11-archive-downloads.html 本文档教程选择的是jdk-11.0.20_linux-x64_bin.tar.g…