uniapp-轮播图点击预览功能

news2024/11/25 3:07:41

实现效果

点击后打开预览图

实现代码

<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 是基地址

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

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

相关文章

vue下载xlsx表格

vue下载xlsx表格 // 导入依赖库 import XLSX from xlsx; import FileSaver from file-saver; methods:{btn(){let date new Date()let Y date.getFullYear() -let M (date.getMonth() 1 < 10 ? 0 (date.getMonth() 1) : date.getMonth() 1) -let D (date.getDat…

抖音小店没有流量?如何快速起店?实操经验分享!

我是电商珠珠 做抖音小店最重要的就是流量&#xff0c;店铺没有流量也就意味着销量上不去&#xff0c;最后只能被平台清退。 我做抖音小店也已经快三年的时间了&#xff0c;这种情况我也遇到过&#xff0c;接下来给大家讲讲解决方案。 第一步&#xff0c;选品 品是整个店铺…

电子商务税收问题:跨境电商的挑战与解决

随着电子商务的崛起&#xff0c;跨境电商已经成为全球贸易的主要动力之一。然而&#xff0c;电子商务的快速发展也带来了一系列税收问题&#xff0c;尤其是涉及跨境交易的税收问题。本文将深入探讨跨境电商所面临的税收挑战&#xff0c;以及政府和国际组织正在采取的解决方案。…

Matlab通信仿真系列——信号处理函数

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 本节目录 一、Matlab信号产生函数…

MATLAB中std函数用法

目录 语法 说明 示例 矩阵列的标准差 三维数组的标准差 指定标准差权重 矩阵行的标准差 数组页的标准差 排除缺失值的标准差 标准差和均值 标准差 std函数的功能是得到标准差。 语法 S std(A) S std(A,w) S std(A,w,"all") S std(A,w,dim) S std(A…

【PTA题目】6-13 求叠数(递归版) 分数 10

6-13 求叠数(递归版) 分数 10 全屏浏览题目 切换布局 作者 李祥 单位 湖北经济学院 请编写递归函数&#xff0c;生成叠数。 例如&#xff1a;Redup(5,8)88888 函数原型 long long Redup(int n, int d); 说明&#xff1a;参数 n 为重复次数(非负整数)&#xff0c;d 为数字…

国鑫受邀出席2023英特尔中国区数据中心渠道客户金秋会

10月18日&#xff0c;2023英特尔中国区数据中心渠道客户金秋会在重庆隆重举行&#xff0c;本次会议共邀请了全国英特尔数据中心渠道生态伙伴、本地服务器系统设计及制造厂商参与&#xff0c;Gooxi作为英特尔在中国区重要合作伙伴受邀参加。 会上&#xff0c;英特尔向生态合作伙…

并行计算机系统结构基础

一、并行计算机系统结构 1.并行性 并行性&#xff1a;计算机系统在同一时刻或者同一时间间隔内 进行多种运算或操作 并行性包括两方面的含义 同时性&#xff1a;两个或两个以上的事件在同一时刻发生并发性&#xff1a;两个或两个以上的事件在同一时间间隔 内发生 从处理数…

新品首发 | HP1011:高性能双相交错 PFC 数字控制器

随着PFC技术的发展&#xff0c;不断有新型PFC拓扑结构提出&#xff0c;如单相PFC、交错并联 PFC、传统无桥PFC、图腾柱无桥 PFC等。交错Boost PFC系统不仅具有并联系统的所有优点&#xff0c;还能减少输入电流纹波&#xff0c;降低开关管的电流应力。在中大功率场所通常采用工作…

vue + antd 动态增加表单并进行表单校验

<template><a-modalv-model:visible="visible":title="formData.id ? 编辑渠道 : 添加渠道":width="850":mask-closable="false":destroy-on-close="true"@ok="onSubmit"@cancel="onClose"&g…

【算法萌新闯力扣】:两个数组的交集

力扣热题&#xff1a;两个数组的交集 开篇 今天早上状态不错&#xff0c;花了较短的时间刷了4道力扣算法题。挑选了一道还不错的题目与大伙分享。 题目链接:349.两个数组的交集 题目描述 代码思路 看到题目后&#xff0c;想到可以把一个数组用集合存起来&#xff0c;然后用…

C语言真的需要头文件吗?

C语言真的需要头文件吗&#xff1f; 头文件的作用是什么&#xff1f; 如果你直接定义了函数&#xff0c;当然不需要头文件。 因为调用函数&#xff0c;你得知道函数的参数有多少&#xff0c;都什么类型的&#xff0c;返回值是什么&#xff0c;这样才能调用。最近很多小伙伴找…

超详细的Jmeter接口测试教程以及接口测试流程

一、Jmeter简介 Jmeter是由Apache公司开发的一个纯Java的开源项目&#xff0c;即可以用于做接口测试也可以用于做性能测试。 Jmeter具备高移植性&#xff0c;可以实现跨平台运行。 Jmeter可以实现分布式负载。 Jmeter采用多线程&#xff0c;允许通过多个线程并发取样或通过…

HLS基础issue

hls 是一个用C/c 来开发PL &#xff0c;产生rtl的工具 hls是按照rtl code来运行的 &#xff0c; 但是rtl会在不同器件调用不同的源语&#xff1b; 可能产生的ip使用在vivado另外一个器件的话 会存在问题&#xff1b; Hls &#xff1a; vivado ip &#xff0c; vitis kernel 是…

【IDEA 使用easyAPI、easyYapi、Apifox helper等插件时,导出接口文档缺少代码字段注释的相关内容、校验规则的解决方法】

问题 IDEA 使用easyAPI、easyYapi、Apifox helper等插件时&#xff0c;导出的接口文档上面&#xff0c;缺少我们代码里的注解字段&#xff0c;如我们规定了NOTNULL、字段描述等。 问题链接&#xff0c;几个月之前碰到过&#xff0c;并提问了&#xff0c;到现在解决&#xff0c…

用华为Mate60系列体验玩机功能,乐趣翻倍!

AI隔空操控&#xff0c;隔空滑动屏幕&#xff0c;随心操作更高效&#xff1b; AI信息保护&#xff0c;智能识别人脸&#xff0c;智慧消息隐藏&#xff1b; 智感支付&#xff0c;快人一步&#xff0c;一步即付更迅捷~

助力水泥基建裂痕自动化巡检,基于yolov5融合ASPP开发构建多尺度融合目标检测识别系统

道路场景下的自动化智能巡检、洞体场景下的壁体类建筑缺陷自动检测识别等等已经在现实生活中不断地落地应用了&#xff0c;在我们之前的很多博文中也已经有过很多相关的实践项目经历了&#xff0c;本文的核心目的是想要融合多尺度感受野技术到yolov5模型中以期在较低参数量的情…

人工智能飞速发展的今天,IT行业能做些什么?

原创 | 文 BFT机器人 01 IT行业&#xff1a;信息流通的“媒介” IT行业作为一个信息化产业&#xff0c;通过运用信息手段和技术&#xff0c;为客户收集、整理、储存、传递信息情报&#xff0c;提供信息服务&#xff0c;并提供相应的信息手段、信息技术等服务。 近年来&#xf…

C生万物 | 从浅入深理解指针【最后部分】

C生万物 | 从浅入深理解指针【最后部分】 文章目录 C生万物 | 从浅入深理解指针【最后部分】前言sizeof和strlen的对比sizeofstrlen 数组和指针笔试题解析一维数组字符数组二维数组 前言 我们前面学了四个部分了&#xff0c;如果没有看前面的建议可以看一下前面的~~ C生万物 |…

机械电子设备信息展示预约小程序的效果如何

电子电工机械设备制造业所涵盖的产品非常广泛&#xff0c;各种产品也都是人们生活所需&#xff0c;近些年来&#xff0c;借势市场规模也在迅速增加中。 电子机械设备产品有大件也有小件&#xff0c;但多数产品都是特定人群购买&#xff0c;因其具有长期使用性&#xff0c;因此…