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

微信小程序拖拽排序有效果图

news 来源：原创 2025/7/16 0:21:58

效果图

请添加图片描述

.wxml

<view class="container" style="--w:{{w}}px;" wx:if="{{location.length}}"><view class="container-item" wx:for="{{list}}" wx:key="index" data-index="{{index}}"style="--c:{{item.color}};transform:translate3d({{location[item.i].x}}px, {{location[item.i].y}}px, 0);{{select === index?'z-index:1;left:'+moveX+'px;top:'+moveY+'px;':animation?'transition: transform 0.3s;':''}}" bind:touchstart="touchS" bind:touchmove="touchM" bind:touchend="touchE">{{item.num}}</view>
</view>

.wxss

.container{position: relative;width: 100%;
}
.container-item{width: var(--w);height: var(--w);background: var(--c);position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;font-size: 48rpx;color: #fff;
}

.js

Page({data: {list:[{color:'#000',num:1},{color:'#f37b1d',num:2},{color:'#39b54a',num:3},{color:'#0081ff',num:4},{color:'#e54d42',num:5},{color:'#e03997',num:6},{color:'#FF66CC',num:7},{color:'#003399',num:8},{color:'#99FFFF',num:9},],/** 拖拽列表宽度 */width:wx.getWindowInfo().windowWidth,/** 每行显示个数 */columns:4,/** 选中元素 */select:-1,/** 位置 */location:[],/** 动画 */animation:true,},onLoad(){let w = this.data.w,list = this.data.list,location = [],columns = this.data.columns,numY,numX;w = this.data.width / columnsfor(let i = 0;i < list.length;i++){numY = i / columns | 0numX = i - numY * columnslist[i].row = numXlist[i].i = ilocation.push({x:numX * w,y:numY * w })}this.setData({w,list,location,})},/** 选中 */touchS(e){this.data.startX = e.touches[0].clientXthis.data.startY = e.touches[0].clientYconst index = e.currentTarget.dataset.indexthis.setData({select:index,})this.data.list[index].n = index},/** 拖动 */touchM(e){let list = this.data.list,select = this.data.select,startX = this.data.startX,startY = this.data.startY;const dragX = e.touches[0].clientX,dragY = e.touches[0].clientY;const x = dragX - startX,y = dragY - startY,columns = this.data.columns,w = this.data.w,f = w / 2;this.setData({moveX:x,moveY:y,})const o = list[select]const selectX = ((x > 0 ? x + f : x - f) / w | 0) + o.rowif(selectX >= columns || selectX < 0){return}const stx = (select / columns | 0) * columnsconst lon = selectX + stx const site = ((y > 0 ? y + f : y - f) / w | 0) * columns + lonif(!list[site] || o.n === site){return}let numif(site !== select || list[o.n].i !== select){for(let i = 0;i < list.length;i++){if(i !== select && list[i].i === site){num = ibreak;}}}else{num = o.n}list[num].i = o.nlist[select].n = sitethis.setData({list,})},/** 结束 */touchE(){var that = thisconst list = that.data.list,select = that.data.select,columns = this.data.columnslet numY,numX;list[select].i = list[select].nlist.sort((a,b) => a.i - b.i)for(let i = 0;i < list.length;i++){numY = i / columns | 0numX = i - numY * columnslist[i].row = numX}that.setData({animation:false},() => {that.setData({select:-1,moveX:0,moveY:0,list,},() => {setTimeout(() => {that.setData({animation:true})},300)})})},
})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。

微信小程序拖拽排序有效果图

效果图 .wxml <view class"container" style"--w:{{w}}px;" wx:if"{{location.length}}"><view class"container-item" wx:for"{{list}}" wx:key"index" data-index"{{index}}"style"--…...

编程日记 2025/7/16 0:21:58

算力网络的早期有关论文——自用笔记

2023年底至2024年初阅读有关论文的自用笔记，作为参考。算力网络架构 https://baijiahao.baidu.com/s?id1727377583404975414&wfrspider&forpc think&note 是否可以和cpu进程调度联系。目前：看一些综述深一步了解背景和发展现状,完善认…...

编程日记 2025/7/15 23:57:02

卷积神经网络基础（四）

今天我们继续学习各个激活函数层的实现过程。目录 5.2 Sigmoid层六、Affine/Softmax层实现 6.1 Affine层 6.2 批处理版本 5.2 Sigmoid层 sigmoid函数的表达式如下： 用计算图表示的话如下： 计算过程稍微有些复杂，且这里除了乘法和加法…...

编程日记 2025/7/15 23:28:57

【MySQL数据库】表的约束

目录 1，空属性 2，默认值 3，列描述 4，zerofill 5，主键primary key 6，自增长auto_increment 7，唯一键unique 8，外键foreign key 在MySQL中，表的约束是指用于插入的…...

编程日记 2025/7/15 23:26:15

网络威胁情报 | Friday Overtime Trooper

本文将分别从两个环境出发，以实践来体验利用威胁情报分析可疑文件的过程。 Friday Overtime 现在你是一位安全分析人员，正在美美等待周五过去，但就在即将下班之时意外发生了：你的客户发来求助，说他们发现了一些可疑文…...

编程日记 2025/7/15 23:25:15

GPIO（通用输入输出端口）详细介绍

一、基本概念 GPIO（General - Purpose Input/Output）即通用输入输出端口，是微控制器（如 STM32 系列）中非常重要的一个外设。它是一种软件可编程的引脚，用户能够通过编程来控制这些引脚的输入或输出状态。在…...

编程日记 2025/7/15 23:34:07

学习笔记——《Java面向对象程序设计》-继承

参考教材： Java面向对象程序设计（第3版）微课视频版清华大学出版社 1、定义子类 class 子类名 extends 父类名{...... }如： class Student extends People{...... } （1）如果一个类的声明中没有extends关…...

编程日记 2025/7/15 15:13:38

基于javaweb的SpringBoot校园失物招领系统设计与实现(源码+文档+部署讲解）

技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...

编程日记 2025/7/16 0:10:43

什么事Nginx，及使用Nginx部署vue项目（非服务器Nginx压缩包版）

什么是 Nginx？ Nginx（发音为 “engine-x”）是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。它以其高性能、高并发处理能力和低资源消耗而闻名。以下是 Nginx 的主要特性和用途：主要特性高性能和高并发 Nginx 能够处理大量并发连接，适合高…...

编程日记 2025/7/15 23:29:47

nodejs使用require导入npm包，开发依赖和生产依赖，全局安装

nodejs使用require导入npm包，开发依赖和生产依赖 ，全局安装 ✅ 一、Node.js 中使用 require() 导入 npm 包 // 导入第三方包（例如 axios） const axios require(axios);// 使用 axios.get(https://api.example.com).then(res &g…...

编程日记 2025/7/15 23:32:28

CSS在线格式化 - 加菲工具

CSS在线格式化打开网站加菲工具选择“CSS在线格式化” 或者直接访问 https://www.orcc.top/tools/css 输入CSS代码，点击左上角的“格式化”按钮得到格式化后的结果...

编程日记 2025/7/15 23:34:07

图片转base64 - 加菲工具 - 在线转换

图片转base64 - 加菲工具先进入“加菲工具” 网打开 https://www.orcc.top， 选择 “图片转base64”功能选择需要转换的图片复制点击“复制”按钮，即可复制转换好的base64编码数据，可以直接用于img标签。...

编程日记 2025/7/15 7:27:23

性能比拼: Redis vs Dragonfly

本内容是对知名性能评测博主 Anton Putra Redis vs Dragonfly Performance (Latency - Throughput - Saturation) 内容的翻译与整理, 有适当删减, 相关指标和结论以原作为准在本视频中，我们将对比 Redis 和 Dragonfly。我们将观察 set 与 get 操作的延迟&#xff…...

编程日记 2025/7/15 23:17:24

如何收集用户白屏/长时间无响应/接口超时问题

想象一下这样的场景：一位用户在午休时间打开某电商应用，准备购买一件心仪已久的商品。然而，页面加载了数秒后依然是一片空白，或者点击“加入购物车”按钮后没有任何反馈，甚至在结算时接口超时导致订单失败。用户的耐心被迅速消耗殆尽，关闭应用，转而选择了竞争对手的产品…...

编程日记 2025/7/15 23:40:48

来啦，烫，查询达梦表占用空间

想象一下oracle，可以查dba_segments，但是这个不可靠（达梦官方连说明书都没有） 先拼接一个sql set lineshow off SELECT SELECT ||||OWNER|||| AS OWNER,||||TABLE_NAME|||| AS TABLE_NAME,TABLE_USED_SPACE(||||OWNER||||,||||T…...

编程日记 2025/7/15 9:44:30

# 利用迁移学习优化食物分类模型：基于ResNet18的实践

利用迁移学习优化食物分类模型：基于ResNet18的实践在深度学习的众多应用中，图像分类一直是一个热门且具有挑战性的领域。随着研究的深入，我们发现利用预训练模型进行迁移学习是一种非常有效的策略，可以显著提高模型的性能&#…...

编程日记 2025/7/16 0:14:26

AT24C02芯片简介：小巧强大的串行EEPROM存储器

一、AT24C02概述 AT24C02是一款2K位（即256字节）的串行EEPROM芯片，采用IC（Inter-Integrated Circuit）总线进行通信，适合低功耗、小容量存储需求。主要特性： 项目参数存储容量 2Kb&#x…...

编程日记 2025/7/15 12:51:38

【Vue】状态管理（Vuex、Pinia）

个人主页：Guiat 归属专栏：Vue 文章目录 1. 状态管理概述1.1 什么是状态管理1.2 为什么需要状态管理 2. Vuex基础2.1 Vuex核心概念2.1.1 State2.1.2 Getters2.1.3 Mutations2.1.4 Actions2.1.5 Modules 2.2 Vuex辅助函数2.2.1 mapState2.2.2 mapGetters2.…...

编程日记 2025/7/16 0:18:13

施磊老师基于muduo网络库的集群聊天服务器(四)

文章目录实现登录业务登录业务代码补全数据库接口:查询,更新状态注意学习一下里面用到的数据库api测试与问题**问题1:****问题2:** 用户连接信息与线程安全聊天服务器是长连接服务器如何找到用户B的连接？在业务层存储用户的连接信息多线程安全问题加锁! 处理客户端…...

编程日记 2025/7/15 12:51:17

深度学习-全连接神经网络（过拟合，欠拟合。批量标准化）

七、过拟合与欠拟合在训练深层神经网络时，由于模型参数较多，在数据量不足时很容易过拟合。而正则化技术主要就是用于防止过拟合，提升模型的泛化能力(对新数据表现良好)和鲁棒性（对异常数据表现良好）。 1. 概念认知 …...

编程日记 2025/7/16 0:12:38

访问Maven私服的教程

1.首先准备好maven私服的启动器，到bin目录下启动： 2.等待加载，加载过程比较长: 3.访问端口号: 4.仓库简介: 5.在maven的setting中 servers配置信息(设置私服访问的密码): 6.配置私服仓库地址: 7.配置上传地址(私服地址): 8.在自己的副项…...

编程日记 2025/7/15 23:54:15

Linux系统编程 day9 SIGCHLD and 线程

SIGCHLD信号只要子进程信号发生改变，就会产生SIGCHLD信号。借助SIGCHLD信号回收子进程回收子进程只跟父进程有关。如果不使用循环回收多个子进程，会产生多个僵尸进程，原因是因为这个信号不会循环等待。 #include<stdio.h> #incl…...

编程日记 2025/7/15 23:49:41

Linux 内核中 cgroup 子系统 cpuset 是什么？

cpuset 是 Linux 内核中 cgroup（控制组） 的一个子系统，用于将一组进程（或任务）绑定到特定的 CPU 核心和内存节点（NUMA 节点）上运行。它通过限制进程的 CPU 和内存资源的使用范围，优…...

编程日记 2025/7/15 23:22:28

乐视系列玩机---乐视2 x520 x528等系列线刷救砖以及刷写第三方twrp 卡刷第三方固件步骤解析

乐视2 x520 x528 x526等，搭载了高通骁龙652处理器，骁龙652的GPU性能甚至优于前一年的骁龙810，配备了3GB RAM和32GB ROM的存储空间，通过博文了解💝💝💝 1💝💝💝-----详细解析乐视2 x520系列黑砖线刷救砖的步骤 2💝💝💝----官方两种更新卡刷步骤以及刷…...

编程日记 2025/7/15 23:49:41

电容加速电路！

大家好，我是记得诚。今天分享一个小电路：电容加速电路。下面是一个普通的三极管开关电路，区别是多了一个C1，C1被称为加速电容。作用是：加速三极管VT1的开通和截止，做到快开快关。工作原理：…...

编程日记 2025/7/14 19:58:23

MCP Host、MCP Client、MCP Server全流程实战

目录准备工作 MCP Server 实现调试工作 MCP Client 实现 MCP Host 配置第一步：配置支持 function calling的 LLM 第二步：添加MCP Server 一般有两种方式，第一种json配置，第二种直接是Command形式，我这里采用Command形式第三步：使用MCP Server 准备工作安装…...

编程日记 2025/6/29 11:36:17

Win10一体机（MES电脑设置上电自动开机）

找个键盘，带线的那种，插到电脑上，电脑开机；连续点按F11；通过↑↓键选择Enter Setup 然后回车； 选择 smart settings ； 选择 Restore AC Power Loss By IO 回车； 将prower off 改为…...

编程日记 2025/7/15 23:30:45

强化学习和微调区别如下

强化学习和微调区别如下定义与概念强化学习**：是一种机器学习范式，强调智能体（agent）如何在环境中采取一系列行动，以最大化累积奖励**。智能体通过与环境进行交互，根据环境反馈的奖励信号来学习最优的行为策略。例如，机器人通过不断尝试不同的动作来学习如何在复杂环…...

编程日记 2025/6/29 9:31:17

【EasyPan】文件上传、文件秒传、文件转码、文件合并、异步转码、视频切割分析

【EasyPan】项目常见问题解答（自用&持续更新中…）汇总版文件上传方法解析一、方法总览 Transactional(rollbackFor Exception.class) public UploadResultDto uploadFile(...)核心能力： 秒传验证：通过MD5文件大小实现文…...

编程日记 2025/7/15 23:58:13

React18+ 项目搭建-从初始化、技术选型到开发部署的全流程规划

搭建一个 React 项目需要从项目初始化、技术选型到开发部署的全流程规划。以下是详细步骤和推荐的技术栈： 一、项目初始化 1. 选择脚手架工具推荐工具： Vite（现代轻量级工具，支持 React 模板，速度快）&am…...

编程日记 2025/7/13 20:20:41

day3 打卡训练营

循环语句和判断语句之前已经会了，把列表的方法练一练浙大疏锦行 python训练营介绍...

编程日记 2025/7/15 1:37:46

MySQL VS SQL Server：优缺点全解析

数据库选型、企业协作、技术生态、云数据库 1.1 MySQL优缺点分析优点开源免费社区版完全免费，适合预算有限的企业允许修改源码定制功能（需遵守GPL协议） 跨平台兼容性支持Windows/Linux/macOS，适配混合环境部署云服务商…...

编程日记 2025/7/15 12:24:39

【CPP】固定大小内存池

程序运行时，通常会频繁地进行内存的分配和释放操作。传统的内存分配方式（如使用new和delete运算符）可能会导致内存碎片的产生，并且每次分配和释放内存都有一定的时间开销。内存池通过在程序启动时一次性分配一大块内存或一次性分配…...

编程日记 2025/7/15 9:45:05

[数据结构]树和二叉树

概念树是一种非线性的数据结构，它是由 n （ n>0 ）个有限结点组成一个具有层次关系的集合。树形结构中，子树之间不能有交集，否则就不是树形结构双亲结点或父结点 ：若一个结点含有子结点，则…...

编程日记 2025/7/16 0:10:43

监控页面卡顿PerformanceObserver

监控页面卡顿PerformanceObserver 性能观察器掘金 const observer new PerformanceObserver((list) > {}); observer.observe({entryTypes: [longtask], })...

编程日记 2025/7/15 23:57:01

Web开发-JavaEE应用JNDI注入RMI服务LDAP服务DNS服务高版本限制绕过

知识点： 1、安全开发-JavaEE-JNDI注入-LADP&RMI&DNS等 2、安全开发-JavaEE-JNDI注入-项目工具&手工原理等演示案例-WEB开发-JavaEE-JNDI注入&LDAP&RMI服务&DNS服务&高版本限制绕过 JNDI全称为 Java Naming and DirectoryInterface&am…...

编程日记 2025/7/15 23:30:45

深度学习训练中的显存溢出问题分析与优化：以UNet图像去噪为例

最近在训练一个基于 Tiny-UNet 的图像去噪模型时，我遇到了经典但棘手的错误： RuntimeError: CUDA out of memory。本文记录了我如何从复现、分析，到逐步优化并成功解决该问题的全过程，希望对深度学习开发者有所借鉴。训练数据&am…...

编程日记 2025/7/11 9:31:16

【Spring】单例模式的创建方式（Bean解析）

在Java中，单例模式（Singleton Pattern）确保一个类只有一个实例，并提供全局访问点。以下是实现单例的五种常见方式：懒汉式、饿汉式、双重检查锁、静态内部类和枚举，包括代码示例和优缺点分析。 1. 懒汉式&am…...

编程日记 2025/7/15 23:14:42

小小矩阵设计

在电气设计图中，矩阵设计的接线方法是通过结构化布局实现多灵活链接的技术，常用于信号切换、配电调压或更加复杂的控制场景。今天聊一种在电气图纸中用到的一种简单矩阵接法，一眼就看明白，很大程度简化了程序控制点和继电器的使用…...

编程日记 2025/6/29 9:30:56

IOT项目——双轴追光系统

双轴太阳能追光系统 - ESP32实现系统概述这个系统使用： ESP32开发板2个舵机（水平方向和垂直方向）4个光敏电阻（用于检测光照方向）适当的电阻（用于光敏电阻分压） 接线示意图 --------------…...

编程日记 2025/7/15 23:47:10

深度学习基石：神经网络核心知识全解析（一）

神经网络核心知识全解析一、神经网络概述神经网络作为机器学习领域的关键算法，在现代生活中发挥着重要作用，广泛应用于图像识别、语音处理、智能推荐等诸多领域，深刻影响着人们的日常生活。它通过模拟人类大脑神经系统的结构和功能&#…...

编程日记 2025/7/15 23:28:03

什么是金字塔缩放（Multi-scale Input）

金字塔缩放什么是金字塔缩放(Multi-scale Input)什么场景下会用到金字塔缩放？图像识别目标跟踪图像压缩视频处理如何在计算机程序中实现金字塔缩放？准备数据缩小数据（构建金字塔的上层）存储数据使用数据（在程序中应用金字塔缩放）金字塔缩放的记忆卡片什么是金字塔缩放(M…...

编程日记 2025/7/15 23:15:34

从零开始配置 Zabbix 数据库监控：MySQL 实战指南

Zabbix作为一款开源的分布式监控工具，在监控MySQL数据库方面具有显著优势，能够为数据库的稳定运行、性能优化和故障排查提供全面支持。以下是使用Zabbix监控MySQL数据库的配置。一、安装 Zabbix Agent 和 MySQL 1. 安装 Zabbix Agent services:zabbix…...

编程日记 2025/6/29 10:07:55

机器学习超参数优化全解析

机器学习超参数优化全解析摘要本文全面深入地剖析了机器学习模型中的超参数优化策略，涵盖了从参数与超参数的本质区别，到核心超参数（如学习率、批量大小、训练周期）的动态调整方法；从自动化超参数优化技术&#xf…...

编程日记 2025/7/15 21:06:09

【算法】双指针8道速通(C++)

1. 移动零思路： 拿示例1的数据来举例，定义两个指针，cur和dest，cur表示当前遍历的元素，dest以及之前表示非零元素先用cur去找非零元素，每找到一个非零元素，就让dest的下一个元素与之交换单个…...

编程日记 2025/7/15 22:00:43

synchronized锁

在了解锁之前我们要先了解对象布局什么是java对象布局在JVM中，对象在内存中存储的布局可以分为三块区域，即实例化之后的对象对象头：分配的空间是固定的12Byte，由Mark Word（标记字段）和Class Pointer&…...

编程日记 2025/7/15 23:43:40

实训Day-2 流量分析与安全杂项

目录实训Day-2-1流量分析实战实训目的实训任务1 SYN半链接攻击流量分析实训任务2 SQL注入攻击流量分析一实训任务3 SQL注入攻击流量分析二实训任务4 Web入侵溯源一实训任务5 Web入侵溯源二编辑实训Day-2-1安全杂项实战实训目的实训任务1 流量分析 FTP…...

编程日记 2025/7/15 23:23:26

The panel of normals is applied by replacing the germline read depth of the sample with the median read depth of samples with the same genotype in our panel. 1.解释: panel of normal 正常组织，用于识别技术噪音 germline read depth: 胚系测序深度。根…...

编程日记 2025/7/16 0:08:03

[预备知识]3. 自动求导机制

自动求导机制本章节介绍 PyTorch 的自动求导机制，包括计算图、反向传播和梯度计算的原理及实现。 1. 计算图原理计算图是深度学习框架中的一个核心概念，它描述了计算过程中各个操作之间的依赖关系。计算图由节点（节点）和边…...

编程日记 2025/6/29 11:04:22

蓝桥杯中的知识点

总结： 这次考的并不理想比赛前好多知识点遗漏但到此为止已经结束了 mod 是模运算（Modulo Operation）的缩写，表示求两个数相除后的余数 10mod31 (a % b) （7%21） 1e9代表1乘以10的9次方&#xff0c…...

编程日记 2025/7/15 18:12:18

效果图

.wxml

.wxss

.js

相关文章：