文心一言帮忙写代码之微信小程序图片移动顺序

news2024/11/7 22:49:54

在这里插入图片描述
先上效果图,图片顺序可移动,左移右移调准顺序。
代码是文心一言帮忙写的,自己稍微改造就可以用了。
首先是往左移,也就是从下标1移到下标0 ,下标2移到下标1
var imglist = [‘aa’, ‘bb’, ‘cc’, ‘dd’];

function moveElementBefore(currentElement, targetElement) {
var currentIndex = imglist.indexOf(currentElement);
var targetIndex = imglist.indexOf(targetElement);

if (currentIndex < 0 || targetIndex < 0 || currentIndex == targetIndex) {
return; // currentElement not found or targetElement not found or currentElement and targetElement are the same
}

imglist.splice(currentIndex, 1); // remove currentElement from the list
imglist.splice(targetIndex <= currentIndex ? targetIndex : targetIndex - 1, 0, currentElement); // insert currentElement before targetElement
}

其次是右移,下标0移到1,下标3移到下标4
var imglist = [‘aa’, ‘bb’, ‘cc’, ‘dd’, ‘ee’, ‘ff’];

function moveElement(element, targetElement) {
var elementIndex = imglist.indexOf(element);
var targetIndex = imglist.indexOf(targetElement);

// 检查元素是否在数组中,以及目标元素是否存在
if (elementIndex < 0 || targetIndex < 0 || element === targetElement) {
return;
}

// 移动元素
imglist.splice(elementIndex, 1);
imglist.splice(targetIndex < elementIndex ? targetIndex + 1 : targetIndex, 0, element);
}

项目是uniapp写的,
html代码:

<image :src=“info” @click=“previewImg(item.imglist)” mode=“aspectFill”
style=“width:120rpx;height:120rpx;margin: 10rpx 10rpx 20rpx 0 ;border: 1px solid #ddd;”>
<view @click=“DelImg1(i,key)”>

×



<image v-else @click=“leftArrow(i,key)” src=“https://guoanju.oss-cn-shenzhen.aliyuncs.com/zhuangshi/gongdi/zsleftarrow.png” style=“width: 30rpx;height: 30rpx;”>

<image v-else @click=“rightArrow(i,key)” src=“https://guoanju.oss-cn-shenzhen.aliyuncs.com/zhuangshi/gongdi/zsrightarrow.png” style=“width: 30rpx;height: 30rpx;”>



js代码:
leftArrow(e,i){
this.moveElementBefore(e,this.infolist[e].imglist[i],this.infolist[e].imglist[i-1])
},
rightArrow(e,i){
this.moveElementAfter(e,this.infolist[e].imglist[i],this.infolist[e].imglist[i+1])
},
moveElementAfter(e,currentElement, targetElement) {
var currentIndex = this.infolist[e].imglist.indexOf(currentElement);
var targetIndex = this.infolist[e].imglist.indexOf(targetElement);
if (currentIndex < 0 || targetIndex < 0 || currentIndex == targetIndex) {
return;
}
this.infolist[e].imglist.splice(currentIndex, 1);
this.infolist[e].imglist.splice(targetIndex < currentIndex ? targetIndex + 1 : targetIndex, 0, currentElement);
},
moveElementBefore(e,currentElement, targetElement) {
var currentIndex = this.infolist[e].imglist.indexOf(currentElement);
var targetIndex = this.infolist[e].imglist.indexOf(targetElement);
if (currentIndex < 0 || targetIndex < 0 || currentIndex == targetIndex) {
return;
}
this.infolist[e].imglist.splice(currentIndex, 1);
this.infolist[e].imglist.splice(targetIndex <= currentIndex ? targetIndex : targetIndex - 1, 0, currentElement);
},

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

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

相关文章

智能电表上的模块发热正常吗?

智能电表是一种可以远程抄表、计费、控制和管理的电力计量设备&#xff0c;它可以实现智能化、信息化和网络化的电力用电管理。智能电表的主要组成部分包括电能计量模块、通信模块、控制模块和显示模块等。其中&#xff0c;通信模块和控制模块是智能电表的核心部件&#xff0c;…

C++11——多线程

目录 一.thread类的简单介绍 二.线程函数参数 三.原子性操作库(atomic) 四.lock_guard与unique_lock 1.lock_guard 2.unique_lock 五.条件变量 一.thread类的简单介绍 在C11之前&#xff0c;涉及到多线程问题&#xff0c;都是和平台相关的&#xff0c;比如windows和linu…

如何使用 NFTScan 的 TON API 实现 NFT 应用开发?

上周 NFTScan 开发者平台已上线了 TON 网络的 NFT API 服务&#xff0c;TON&#xff08;The Open Network&#xff09;是由 Telegram 团队打造的一条 Layer 1 高性能公链&#xff0c;采用自己的 TVM 虚拟机&#xff0c;与 EVM 不兼容。通过先进的技术架构实现每秒百万级 TPS 的…

为什么需要 SOME/IP

传统汽车协议的问题 如今的汽车不仅仅是通勤和交通工具&#xff0c;车辆现在设计得功能齐全&#xff0c;使旅程成为一种豪华体验。所有这些都是通过将先进的电子技术与车辆的发动机控制单元&#xff08;ECU&#xff09;集成而实现的。这种新的情景显著改变了ECU的不同单元之间…

生成扩散模型理论框架

1、随机微分方程&#xff08;Stochastic Differential Equation&#xff0c;SDE&#xff09; DDPM的一般化形式 2、常微分方程&#xff08;Ordinary differential equation&#xff0c;ODE&#xff09; DDIM的一般化形式 3、得分匹配&#xff08;Score matching&#xff09; …

如何快速高效的掌握一门新技术

目录 前言1 确定合适的学习目标1.1 SMART目标1.2 不同类型的学习目标 2 建立知识体系3 学习金字塔&#xff1a;教授他人3.1 深化理解3.2 记忆巩固3.3 自信提升3.4 知识共享 4 刻意练习4.1 构建个人项目4.2 参与实际项目4.3 参与开源项目4.4 解决复杂问题 结论 前言 学习一门新…

cAdvisor监控Docker容器做性能测试

cAdvisor监控Docker容器做性能测试 缘起 当前有个服务做技术选型&#xff0c;服务要求比较高的性能&#xff0c;要做性能测试。部署的环境是容器话部署&#xff0c;但申请新的容器流程较长&#xff0c;于是我打算在流程走完之前简单评估下性能&#xff0c;来确定技术选型是否…

微信聚合聊天系统的便捷功能:自动回复

当下&#xff0c;微信已然成为我们在工作中必不可少的沟通工具。但由于微信平台尚未开放自动回复、快捷回复等便捷功能&#xff0c;在通过平台展开工作时&#xff0c;一旦咨询量非常大&#xff0c;往往会出现回复不及时的情况。如此一来便会影响客户的满意度&#xff0c;降低客…

记一次EDU证书站

如果文章对你有帮助&#xff0c;欢迎关注、点赞、收藏一键三连支持以下哦&#xff01; 想要一起交流学习的小伙伴可以加zkaq222&#xff08;备注CSDN&#xff0c;不备注通不过哦&#xff09;进入学习&#xff0c;共同学习进步 目录 目录 1.前言&#xff1a; 2.信息搜集 3.漏…

H5前端开发——BOM

H5前端开发——BOM BOM&#xff08;Browser Object Model&#xff09;是指浏览器对象模型&#xff0c;它提供了一组对象和方法&#xff0c;用于与浏览器窗口进行交互。 通过 BOM 对象&#xff0c;开发人员可以操作浏览器窗口的行为和状态&#xff0c;实现与用户的交互和数据传…

sahi切片辅助训练推理

本文的目的切片yolov5标注格式的数据&#xff0c;并保存图片和标注文件 代码实现步骤如下 把yolov5格式转换成coco格式标签&#xff1b;切片图片和coco标签&#xff1b;把切片出来的coco标签转换回yolov5标签格式 # 1. 把yolov5格式转换成coco格式标签&#xff1b; # 2. 切片…

Java关键字 `super` 的骚操作

文章目录 1. 调用父类构造方法2. 访问父类属性和方法3. 创建父类引用4. 在接口中使用 super5. 在 Lambda 表达式中使用 super6. 异常处理结语 &#x1f389;欢迎来到Java学习路线专栏~Java关键字 super 的骚操作 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#…

Android gradle动态配置不同打包环境参数值

一、背景 在android开发中&#xff0c;包的构建通过gradle脚本来完成的&#xff0c;这个脚本也提供了很多东西来配合我们开发。最常见的类似渠道和不同版本包。 打包的配置常见的是buildTypes节点&#xff0c;通过buildTypes设置不同的action完成不同包的输出 二、gradle的Jav…

(八)vtk常用类的常用函数介绍(附带代码示例)

vtk中类的说明以及函数使用 https://vtk.org/doc/nightly/html/annotated.html 一、vtkObject派生类 1.vtkPoints 点 InsertNextPoint(double, double, double)&#xff1a;插入点。 2.vtkCellArray 单元数组 InsertNextCell (vtkIdType npts, const vtkIdType *pts)&…

【底层服务/编程功底系列】「大数据算法体系」带你深入分析MapReduce算法 — Shuffle的执行过程

【底层服务/编程功底系列】「大数据算法体系」带你深入分析MapReduce算法 — Shuffle的执行过程 Shuffle是什么Shuffle的流程处理map任务的执行流程reduce任务的执行流程 Shuffle过程分析和优化map任务深入分析细化步骤分析1. 数据分片读取2. 分配计算Reduce服务Partitioner分区…

LINUX | hexdump以16进制查看文件内容

LINUX | hexdump以16进制查看文件内容 时间&#xff1a;2023-10-20 文章目录 LINUX | hexdump以16进制查看文件内容1.参考2.示例1.以ASCII字符显示文件中字符2.以16进制和相应的ASCII字符显示文件里的字符3.只显示文件中前n个字符4.以偏移量开始格式输出 1.参考 1.Linux命令–h…

C语言指针精简版(二)

目录 数组名的理解 使⽤指针访问数组 ⼀维数组传参的本质 冒泡排序 ⼆级指针及其解引用 指针数组 实例&#xff1a;指针数组模拟⼆维数组 数组名的理解 对于数组名表示的意义一共有三种情况&#xff1a; *1、数组名&#xff1a;表示数组⾸元素地址。 *2、sizeof(数组名…

中文编程工具开发语言开发的实际案例:触摸屏点餐软件应用场景实例

中文编程工具开发语言开发的实际案例&#xff1a;触摸屏点餐软件应用场景实例 软件特色&#xff1a; 1、功能实用&#xff0c;操作简单&#xff0c;不会电脑也会操作&#xff0c;软件免安装&#xff0c;已内置数据库。软件在关闭的时候&#xff0c;可以设置会员数据备份到U盘&…

@Controller与@RestController

总结 Controller &#xff1a;定义一个控制器类. RequestMapping &#xff1a;给出外界访问方法的路径&#xff0c;或者说触发路径 &#xff0c;触发条件。 具体解析访问路径到某个方法上. ResponseBody &#xff1a;标记Controller类中的方法。把return的结果变成JSON对象…