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

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

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

相关文章

Web之JavaScript(jQuery)笔记

Web之HTML、CSS、JavaScript 三、JavaScriptJS调试变量自定义函数数据类型及转换运算符优先级内置函数数组事件DOM(Document Object Model 文档对象模型)jQuery Web之HTML笔记 Web之CSS笔记 三、JavaScript JavaScript&#xff08;简称“JS”&#xff09;是一种轻量级的面向对…

element-ui中怎样使用iconfont的图标

1 登录 https://www.iconfont.cn/ 2 搜索合适的图 这里可以找到这个图所在的图库。这样就可以一次查找到对应的所有同款图标 3 选择同款加入购物车 4 将购物车的icon加入项目&#xff0c;注意是新建项目&#xff0c;除非你是确定需要前面已经加过的icon 5 下载icon 选择fon…

麒麟系统安装找不到安装源!!!!设置基础软件仓库时出错

记录--华为RH2288 V3服务器安装麒麟系统遇到的问题 1.遇到的问题--“设置基础软件仓库时出错”报错导致无法继续安装 没办法下一步 先说结论&#xff1a;系统bug 该问题在CentOS、Rocky Linux最新版中均存在 解决&#xff1a; &#xff08;一&#xff09;、如果是外网直接配…

github 开源whisper ros llm

GitHub - openai/whisper: Robust Speech Recognition via Large-Scale Weak Supervision openai whisper ROS LLM https://github.com/Auromix/ROS-LLM/tree/ros2-humble/llm_input

PHP字符串函数的解析

在PHP中&#xff0c;字符串是一种常见的数据类型&#xff0c;用于存储和操作文本数据。PHP提供了丰富的字符串函数&#xff0c;用于执行各种字符串操作&#xff0c;包括截取、连接、替换、搜索等。在这篇文章中&#xff0c;我们将深入解析一些常用的PHP字符串函数&#xff0c;以…

京东API接口获取京东平台商品详情数据,SKU,价格参数及其返回值说明

做过淘客开发的一定接触过淘宝API开发。 而做京东联盟软件自然离不开京东联盟API。 京东联盟API目前上线的有很多。 参数说明 通用参数说明 url说明 https://api-gw.onebound.cn/平台/API类型/ 平台&#xff1a;淘宝&#xff0c;京东等&#xff0c; API类型:[item_search,ite…

【揭秘】MySQL逻辑架构:一文带你全面了解!

mysql是我们开发过程中使用的最多的数据库&#xff0c;大多数程序员平时都是做CRUD&#xff0c;如果CRUD慢了&#xff0c;那就再加一个索引&#xff0c;如果加上索引还不行&#xff0c;那基本上开发就没辙了&#xff0c;因为对mysql内部理解不深入、不清晰&#xff0c;所以问题…

Ps:变换

可以向选区、整个图层、多个图层或图层蒙版应用变换 Transform&#xff0c;还可以向路径、矢量形状、矢量蒙版、选区边界或 Alpha 通道应用变换。 若要变换栅格&#xff08;像素&#xff09;图像&#xff0c;建议先将其转换为智能对象&#xff0c;以便进行非破坏性的变换。 Ps菜…

论文-分布式-拜占庭将军问题

目录 0-前言 1-导引 2-不可能性 3将军(1叛徒)问题不存在解/不能达成共识 少于3m1个将军(有m个叛徒)不存在解/不能达成共识 精确一致性与近似一致性是同等困难的 3-使用口头消息的解 “口头消息”的含义 OM(m)算法的步骤 OM(m)算法的正确性推导 4-使用签名消息情况下…

尽快调整心态,切莫自讨苦吃

退休多年的老龄人的本“人民体验官”闲得无聊&#xff0c;怕被闲出更多病痛&#xff0c;更怕被闲死&#xff0c;所以天天上网坚持职业新闻人的老习惯——上网读新闻&#xff0c;并以一孔之见置评&#xff0c;旨在抛砖引玉。 11月8日&#xff0c;本“人民体验官 ”在推广人民日…

mysql主从搭建(docker)

一、主从概述 MySQL主从又叫Replication、AB复制。简单讲就是A与B两台机器做主从后&#xff0c;在A上写数据&#xff0c;另外一台B也会跟着写数据&#xff0c;实现数据实时同步。有这样几个关键点&#xff1a; 1&#xff09;MySQL主从是基于binlog&#xff0c;主上需开启binl…

debian10 开启rdp安装firefox,firefox 中文乱码

debian10 开启rdp安装firefox apt -y install tigervnc-standalone-server apt -y install xrdp tigervnc-standalone-server systemctl enable xrdpapt install firefox-esrmstsc连接 firefox-settings-general-fonts-advanced-Simplified Chinese

服务器探针-serverstatus

{alert type"info"} 之前给大家介绍过一个简单的服务器监控。uptime-kuma 今天给各位带来一个酷炫的多服务器探针和多服务器监控。ServerStatus {/alert} 作者的开源项目地址如下&#xff1a;https://github.com/cppla/ServerStatus 作者的项目体验地址如下 https://…

Ghidra逆向工具配置 MacOS 的启动台显示(Python)

写在前面 通过 ghidra 工具, 但是只能用命令行启动, 不太舒服, 写个脚本生成 MacOS 的 app 格式并导入启动台. 不算复杂, 主要是解析包的一些元信息还有裁剪软件图标(通过 MacOS 自带的 API) 脚本 #!/opt/homebrew/bin/python3import os import re import subprocess as sp…

离开大促的电商生意,应该怎么玩?

离开大促的电商生意&#xff0c;应该怎么玩&#xff1f; 2023-11-20 11:07DataStory 双11圆满收官&#xff0c;生意场上的角逐从未停止。 最近一周&#xff0c;各大平台纷纷晒出今年度战绩&#xff0c;天猫宣布全面增长&#xff0c;402个品牌成交破亿&#xff0c;3.8万个品牌…

Dockerfile自定义镜像以及案例分析

文章目录 一、Dockerfile自定义镜像1.1 镜像结构1.2 Dockerfile语法 二、构建Java项目三、基于java8构建java四、小结 一、Dockerfile自定义镜像 常见的镜像在DockerHub就能找到&#xff0c;但是我们自己写的项目就必须自己构建镜像了。 而要自定义镜像&#xff0c;就必须先了…

CICD 持续集成与持续交付——jenkins

部署 软件下载&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/jenkins/redhat/ [rootcicd2 ~]# rpm -ivh jdk-11.0.15_linux-x64_bin.rpm[rootcicd2 ~]# yum install -y fontconfig[rootcicd2 ~]# rpm -ivh jenkins-2.432-1.1.noarch.rpm启动服务 [rootcicd2 ~]# systemctl…

【JVM】Java虚拟机

本文主要介绍了JVM的内存区域划分,类加载机制以及垃圾回收机制. 其实JVM的初心,就是让java程序员不需要去了解JVM的细节,它把很多工作内部封装好了.但是学习JVM的内部原理有利于我们深入理解学习Java. 1.JVM的内存区域划分 JVM其实是一个java进程 ; 每个java进程,就是一个jvm…

MVSNet论文笔记

MVSNet论文笔记 摘要1 引言2 相关基础2.1 多视图立体视觉重建&#xff08;MVS Reconstruction&#xff09;2.2 基于学习的立体视觉&#xff08;Learned Stereo&#xff09;2.3 基于学习的多视图的立体视觉&#xff08;Learned MVS&#xff09; 3 MVSNet3.1 网络架构3.2 提取图片…

ModStartCMS v7.6.0 CMS备份恢复优化,主题开发文档更新

ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用&#xff0c;支持后台一键快速安装&#xff0c;让开发者能快的实现业务功能开发。 系统完全开源&#xff0c;基于 Apache 2.0 开源协议&#xff0c;免费且不限制商业使用。 功能特性 丰富的模块市…