当前位置: 首页 > news >正文

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

在这里插入图片描述
先上效果图,图片顺序可移动,左移右移调准顺序。
代码是文心一言帮忙写的,自己稍微改造就可以用了。
首先是往左移,也就是从下标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);
},

相关文章:

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

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

【电子通识】USB接口三大类型图册

基本概念 不同时期的USB接口有不同的类型&#xff0c;USB接口分为插头和插座&#xff1a; 插头&#xff0c;plug&#xff0c;对应的也叫公口&#xff0c;即插别人的。 插座&#xff0c;receptacle&#xff0c;对应也叫做母口&#xff0c;即被插的。 USB的接口类型&#xff0…...

@Controller与@RestController

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

Compose Desktop 使用中的几个问题(分平台加载资源、编写Gradle 任务下载平台资源、桌面特有组件、鼠标键盘事件)

前言 在我之前的文章 Compose For Desktop 实践&#xff1a;使用 Compose-jb 做一个时间水印助手 中&#xff0c;我们使用 Compose For Desktop 写了一个用于读取照片 EXIF 中的拍摄日期参数并以文字水印的方式添加到照片上的桌面程序。 但是事实上&#xff0c;这个程序的名字…...

【华为OD机试python】返回矩阵中非1的元素个数【2023 B卷|200分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 存在一个m*n的二维数组,其成员取值范围为0,1,2。 其中值为1的元素具备同化特性,每经过1S,将上下左右值为0的元素同化为1。 而值为2的元素,免疫同化。 将数组所有成员随机初始化为0或…...

容器安全 - 利用容器的特权配置实现对Kubernetes容器的攻击

《OpenShift / RHEL / DevSecOps 汇总目录》 文章目录 准备环境利用特权配置对Kubernetes容器攻击privileged hostpathprivileged hostpidprivilegedhostpathhostpidhostipchostnetwork 参考 通过将运行 Pod 的 privileged 设为 true&#xff0c;容器就以特权模式运行在宿主…...

深度剖析Android Binder IPC机制

Android系统的成功离不开其强大的IPC&#xff08;Inter-Process Communication&#xff09;机制&#xff0c;其中最引人注目的就是Binder。本文将深入探讨Binder的技术原理&#xff0c;解释其工作方式以及相关的关键概念。 什么是Binder Binder是Android系统中的IPC机制&…...

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

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

CISA 彻底改变了恶意软件信息共享:网络安全的突破

在现代网络安全中&#xff0c;战术技术和程序&#xff08;TTP&#xff09;的共享对于防范网络事件至关重要。 因此&#xff0c;了解攻击向量和攻击类型之间的关联如今是让其他公司从其他公司遭受的 IT 事件中受益&#xff08;吸取经验教训&#xff09;的重要一步。 美国主要网…...

macos 12 支持机型 macOS Monterey 更新中新增的功能

macOS Monterey 能让你以全然一新的方式与他人沟通联络、共享内容和挥洒创意。尽享 FaceTime 通话新增的音频和视频增强功能&#xff0c;包括空间音频和人像模式。通过功能强大的效率类工具&#xff08;例如专注模式、快速备忘录和 Safari 浏览器中的标签页组&#xff09;完成更…...

代码随想录算法训练营第五十六天|1143.最长公共子序列、1035.不相交的线、53. 最大子序和

代码随想录算法训练营第五十六天|1143.最长公共子序列、1035.不相交的线、53. 最大子序和 1143.最长公共子序列1035.不相交的线53. 最大子序和 做了一个小时左右 1143.最长公共子序列 题目链接&#xff1a;1143.最长公共子序列 文章链接 状态&#xff1a;会做 代码 class Solu…...

01认识微服务

一、微服务架构演变 1.单体架构 将所有的功能集中在一个项目开发&#xff0c;打成一个包部署。优点架构简单&#xff0c;部署成本低。缺点耦合度高&#xff0c;不利于大型项目的开发和维护 2.分布式架构 根据业务功能对系统进行拆分&#xff0c;每个业务模块作为独立的项目…...

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

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

网络代理技术的广泛应用和安全保障

随着网络世界的日益发展&#xff0c;网络代理技术作为保障隐私和增强安全的重要工具&#xff0c;其在网络安全、爬虫开发和HTTP协议中的多面应用备受关注。下面我们来深入了解Socks5代理、IP代理以及它们的作用&#xff0c;探讨它们如何促进网络安全和数据获取。 Socks5代理和…...

EasyCVR视频汇聚平台显示有视频流但无法播放是什么原因?该如何解决?

视频汇聚/视频云存储/集中存储/视频监控管理平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;实现视频资源的鉴权管理、按需调阅、全网分发、云存储、智能分析等&#xff0c;视频智能分析平台EasyCVR融合性强、开放度…...

WuThreat身份安全云-TVD每日漏洞情报-2023-10-13

漏洞名称:libcue <2.2.1 越权访问漏洞 漏洞级别:高危 漏洞编号:CVE-2023-43641,CNNVD-202310-579 相关涉及:系统-alpine_edge-libcue-*-Up to-(excluding)-2.2.1-r0- 漏洞状态:未定义 参考链接:https://tvd.wuthreat.com/#/listDetail?TVD_IDTVD-2023-25092 漏洞名称:科大…...

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

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

138.【JUC并发编程- 03】

JUC并发编程- 03 (六)、共享模型之无锁1.问题提出(1).为什么不安全?(2).安全实现_使用锁(3).安全实现_使用CAS 2.CAS与volatile(1).CAS_原理介绍(2).CAS_Debug分析(3).volatile(4).为什么无锁效率高(5).CAS的特点 3.原子整形(1).原子整数类型_ 自增自减(2).原子整数类型_乘除模…...

React Hooks批量更新问题

React 版本17.0.2 import React, { useState } from react;const Demo () > {const [count, setCount] useState(0);const [count1, setCount1] useState(0);const [count2, setCount2] useState(0);console.log(Demo);const add async () > {await 10;setCount(c…...

竞赛 深度学习YOLO抽烟行为检测 - python opencv

文章目录 1 前言1 课题背景2 实现效果3 Yolov5算法3.1 简介3.2 相关技术 4 数据集处理及实验5 部分核心代码6 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习YOLO抽烟行为检测 该项目较为新颖&#xff0c;适合作为竞赛课…...

Spring Batch 中的异步处理与多线程策略

在使用Spring Batch进行大规模数据处理时,性能优化是一个关键问题。特别是当我们面对大量数据需要处理时,如何有效利用系统资源来提高批处理速度变得尤为重要。本文将深入探讨Spring Batch中的异步处理和多线程策略,通过实例说明如何在实际项目中应用这些技术。 异步处理的…...

AI给软件测试带来的5大机遇,错过一个都不应该!

01「 什么是人工智能&#xff08;AI&#xff09;&#xff1f;」 人工智能&#xff08;Artificial Intelligence, AI&#xff09;是一门集合了计算机科学、信息工程、心理学、哲学等多学科知识的研究领域&#xff0c;它旨在创建能够执行通常需要人类智能的任务的机器和软件。AI…...

机器学习中随机性的核心作用与实践指南

1. 随机性在机器学习中的核心价值我第一次意识到随机性的重要性是在调试一个过拟合的神经网络时。当时模型在训练集上表现完美&#xff0c;但测试集准确率却惨不忍睹。直到在Dropout层增加了随机失活&#xff0c;才突然明白&#xff1a;有时候刻意引入的不确定性&#xff0c;反…...

革命性AI开发环境工具envd:10分钟打造可复现的深度学习环境

革命性AI开发环境工具envd&#xff1a;10分钟打造可复现的深度学习环境 【免费下载链接】envd &#x1f3d5;️ Reproducible development environment for humans and agents 项目地址: https://gitcode.com/gh_mirrors/en/envd envd&#xff08;ɪnˈvdɪ&#xff09;…...

curl-impersonate故障排除:常见问题和解决方案的完整清单

curl-impersonate故障排除&#xff1a;常见问题和解决方案的完整清单 【免费下载链接】curl-impersonate An active fork of curl-impersonate with more versions and build targets. A series of patches that make curl requests look like Chrome, Firefox and Safari. 项…...

终极减法:在亚马逊,为何“显而易见”是穿透信息洪流的唯一利器

在今天这个信息爆炸的时代&#xff0c;尤其是在亚马逊这片被海量商品和广告淹没的平台上&#xff0c;只有那些“显而易见”的简单想法才能真正进入消费者心智&#xff0c;并驱动购买。​ 试图传递过多、过复杂的信息&#xff0c;反而会成为阻碍成功的最大障碍。然而&#xff0c…...

合约优先无密钥量化研究沙盒:OpenClaw 工程化实践指南

1. 项目概述&#xff1a;一个为量化研究而生的合约优先、无密钥沙盒如果你和我一样&#xff0c;在加密货币期货量化策略开发的路上踩过不少坑&#xff0c;那你一定对这几个场景不陌生&#xff1a;想复现一个历史行情来验证策略逻辑&#xff0c;结果发现数据源格式五花八门&…...

Python农业物联网融合不是“拼接”,而是“重构”:用本体建模+动态权重分配实现作物胁迫预警准确率跃升至94.3%(IEEE IoT Journal 2024最新实践)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Python农业物联网多源数据融合 多源异构数据接入挑战 现代农业物联网系统常集成土壤温湿度传感器、气象站、无人机遥感影像、边缘摄像头及历史农事日志等多类数据源&#xff0c;其协议&#xff08;MQT…...

别再问Go有没有char了!一文搞懂byte、rune和单引号字符串的实战区别

别再问Go有没有char了&#xff01;一文搞懂byte、rune和单引号字符串的实战区别 每次看到Go新手在群里问"为什么Go没有char类型"&#xff0c;我就想起自己当年被C语言思维支配的恐惧。作为一个从Java/C转Go的老兵&#xff0c;我完全理解这种困惑——毕竟在其他语言里…...

大模型入门必看!2026爆款书单+AGI独家资料包免费领,抢占AI风口!

本文为程序员提供了大模型应用开发的入门指南&#xff0c;推荐了五本2024年畅销的大模型书籍&#xff0c;涵盖大模型学习、人工智能基础和AIGC自动化编程等内容。同时&#xff0c;作者还分享了价值2万的大模型学习资料包&#xff0c;包括学习路线图、视频教程、技术文档和电子书…...