当前位置: 首页 > 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);
},

http://www.lryc.cn/news/199735.html

相关文章:

  • 【电子通识】USB接口三大类型图册
  • @Controller与@RestController
  • Compose Desktop 使用中的几个问题(分平台加载资源、编写Gradle 任务下载平台资源、桌面特有组件、鼠标键盘事件)
  • 【华为OD机试python】返回矩阵中非1的元素个数【2023 B卷|200分】
  • 容器安全 - 利用容器的特权配置实现对Kubernetes容器的攻击
  • 深度剖析Android Binder IPC机制
  • 【底层服务/编程功底系列】「大数据算法体系」带你深入分析MapReduce算法 — Shuffle的执行过程
  • CISA 彻底改变了恶意软件信息共享:网络安全的突破
  • macos 12 支持机型 macOS Monterey 更新中新增的功能
  • 代码随想录算法训练营第五十六天|1143.最长公共子序列、1035.不相交的线、53. 最大子序和
  • 01认识微服务
  • 智能电表上的模块发热正常吗?
  • 网络代理技术的广泛应用和安全保障
  • EasyCVR视频汇聚平台显示有视频流但无法播放是什么原因?该如何解决?
  • WuThreat身份安全云-TVD每日漏洞情报-2023-10-13
  • 中文编程工具开发语言开发的实际案例:触摸屏点餐软件应用场景实例
  • 138.【JUC并发编程- 03】
  • React Hooks批量更新问题
  • 竞赛 深度学习YOLO抽烟行为检测 - python opencv
  • cAdvisor监控Docker容器做性能测试
  • 记一次EDU证书站
  • React高频面试题100+题,这一篇就够了!
  • mysql MVC jsp实现表分页
  • 【微信小程序】数字化会议OA系统之首页搭建(附源码)
  • Leetcode——二维数组及滚动数组练习
  • 钢水包升降翻转液压系统比例阀放大器
  • 通达OA-通用版-V12,流程及表单自定义好用的类
  • 如何在vue中实现图片懒加载
  • Mac 远程桌面软件
  • EPLAN_005#宏边框、页宏、窗口宏/符号宏