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

taro h5列表拖拽排序 --- sortablejs 和 react-sortable-hoc

描述:列表,拖拽排序,只测试了h5

一、sortablejs

文档:http://www.sortablejs.com/

1.安装sortablejs
2、引入

import Sortable from 'sortablejs'

3、页面

const [list, setList] = useState([{id: 'item-1',content: '选项1'
}, {id: 'item-2',content: '选项2'
}, {id: 'item-3',content: '选项3'
}])const getListRef = (instance) => {new Sortable(instance, {animation: 150,ghostClass: '自定义的类名',});
}return (<View ref={getListRef}>{list.map((item, index) => {return (<View key={`item-${index}`}>{ item.content }</View>)})}</View>
)

!!!注意
ghostClass控制的不时拖动中的影子,而是拖动的最终落在目标位置的item
在这里插入图片描述
4、item中有Switch的bug
在这里插入图片描述
解决方法:在switch外套个容器,设置宽高和switch一致,超出隐藏

另外,拖动中的重影没有直接的属性去除,还没有找到好的方法…

二、react-sortable-hoc

文档:https://www.npmjs.com/package/react-sortable-hoc
中文文档:https://www.5axxw.com/wiki/content/hrpw3t
1、安装 react-sortable-hoc和array-move
2、引入

import { arrayMoveImmutable } from 'array-move'
import { SortableContainer, SortableElement } from 'react-sortable-hoc'

3、单个item

const SortableItem = SortableElement(({value}) => {return (<View className="tab-item"><Image src='' className="logo" />{value.label}</View>)
})

4、列表

const SortableList = SortableContainer(({items, onSortEnd}) => {return (<View className="tab-list">{items.map((value, index) => (<SortableItem key={`tab-item-${index}`} index={index} value={value} />))}</View>)
})

5、页面

const [items, setItems] = useState([{label: '选项1',checked: true}, {label: '选项2',checked: false}])useEffect(() => {// 这里可以监听到itemsconsole.log(items)}, [items])const onSortEnd = ({oldIndex, newIndex}) => {setItems(arrayMoveImmutable(items, oldIndex, newIndex))};return (<SortableList items={items} onSortEnd={onSortEnd} />)
.tab-item {display: flex;align-items: center;padding: 10px;margin-bottom: 20px;color: #fff;background: #ccc;.logo {margin-right: 10px;width: 50px;height: 50px;background: yellow;}
}

!!!注意点
设置样式的时候,tab-item要单独设置,不要嵌套在其他元素下,否则会出现鼠标按下和拖动时,元素样式消失
在这里插入图片描述

常用的属性: (加在SortableList上)
pressDelay:number, 按下之后多少毫秒可以排序,不能与distance同用
Distance: number, 按下之后鼠标移动多少像素可以拖动元素
Helpclass: string , 按下去的元素的样式名称
hideSortableGhost:bolean, 拖动时是否隐藏重影, 默认时隐藏的

默认只要按下就会在body上插入一个item, 可以用pressDelay 或distance控制时间
在这里插入图片描述

6、item中有Switch的bug
在这里插入图片描述
解决方法:在switch外套个容器,设置宽高和switch一致,超出隐藏

7、点击switch, 获取chang的值
思路:子组件item传值给最外层SortableList,通过useState更改列表中switch值,最后在effect中监听到列表

相关文章:

taro h5列表拖拽排序 --- sortablejs 和 react-sortable-hoc

描述&#xff1a;列表&#xff0c;拖拽排序&#xff0c;只测试了h5 一、sortablejs 文档&#xff1a;http://www.sortablejs.com/ 1.安装sortablejs 2、引入 import Sortable from sortablejs3、页面 const [list, setList] useState([{id: item-1,content: 选项1 }, {id…...

Linux的shell脚本常用命令

1、前提 使用shell脚本可以将所要执行的命令行进行汇总&#xff0c;统一执行&#xff0c;制作为脚本工具&#xff0c;简化重复性工作 1.1、常用命令 1.1.1、启动命令 假设我们拥有一个halloWord.sh的脚本&#xff0c;通过cd 命令进入相对应的目录下 ./halloWord.sh1.1.2、…...

使用自己的数据集预加载 Elasticsearch

作者&#xff1a;David Pilato 我最近在讨论论坛上收到一个问题&#xff0c;关于如何修改官方 Docker 镜像以提供一个现成的 Elasticsearch 集群&#xff0c;其中已经包含一些数据。 说实话&#xff0c;我不喜欢这个想法&#xff0c;因为你必须通过提 entrypoint.sh 的分叉版本…...

机器视觉赛道持续火热,深眸科技坚持工业AI视觉切入更多应用领域

随着深度学习等算法的突破、算力的不断提升以及海量数据的持续积累&#xff0c;人工智能逐渐从学术界向工业界落地。而机器视觉作为人工智能领域中一个正在快速发展的分支&#xff0c;广泛应用于工业制造的识别、检测、测量、定位等场景&#xff0c;相较于人眼&#xff0c;在精…...

MyBatis操作数据库常见用法总结2

文章目录 1.动态SQL使用什么是动态sql为什么用动态sql标签拼接标签拼接标签拼接标签拼接标签拼接 补充1&#xff1a;resultType和resultMap补充2&#xff1a;后端开发中单元测试工具使用&#xff08;Junit框架&#xff09; 1.动态SQL使用 以insert标签为例 什么是动态sql 是…...

基于SpringBoot+LayUI的宿舍管理系统 001

项目简介 源码来源于网络&#xff0c;项目文档仅用于参考&#xff0c;请自行二次完善哦。 系统以MySQL 8.0.23为数据库&#xff0c;在Spring Boot SpringMVC MyBatis Layui框架下基于B/S架构设计开发而成。 系统中的用户分为三类&#xff0c;分别为学生、宿管、后勤。这三…...

C语言笔记7

#include <stdio.h> int main(void) {int a123;int b052;//十进制42int c0xa2;//十进制162printf("a%d b%o c%x \n",a,b,c);//分别是十进制 八进制 十六进制printf("a%d b%d c%d \n",a,b,c);printf("Hello 凌迟老头\n");return …...

Centos更换网卡名称为eth0

Centos更换网卡名称为eth0 已安装好系统后需要修改网卡名称为eth0 编辑配置文件将ens33信息替换为eth0,可在vim命令模式输入%s/ens33/eth0/g替换相关内容 修改内核文件,添加内容:net.ifnames=0 biosdevname=0 [root@nova3 ~]# vim /etc/default/grub 使用命令重新生成g…...

【Express.js】软件测试

软件测试 本节介绍如何在 express.js 使用 Jest 进行单元测试 准备工作 准备一个基础的 express 项目&#xff0c;本文基于 evp-express-cli安装 Jest npm install jest --save-dev生成 Jest 配置 npx jest --init编写测试 创建测试文件&#xff0c;以 .test.js 后缀命名…...

TCP三次握手、四次握手过程,以及原因分析

TCP的三次握手和四次挥手实质就是TCP通信的连接和断开。 三次握手&#xff1a;为了对每次发送的数据量进行跟踪与协商&#xff0c;确保数据段的发送和接收同步&#xff0c;根据所接收到的数据量而确认数据发送、接收完毕后何时撤消联系&#xff0c;并建立虚连接。 四次挥手&…...

OceanBase X Flink 基于原生分布式数据库构建实时计算解决方案

摘要&#xff1a;本文整理自 OceanBase 架构师周跃跃&#xff0c;在 Flink Forward Asia 2022 实时湖仓专场的分享。本篇内容主要分为四个部分&#xff1a; 分布式数据库 OceanBase 关键技术解读 生态对接以及典型应用场景 OceanBase X Flink 在游戏行业实践 未来展望 点击…...

600V EasyPIM™ IGBT模块FB30R06W1E3、FB20R06W1E3B11、FB20R06W1E3降低了系统成本和损耗,可满足高能效要求。

EasyPIM™ IGBT模块是一种三相输入整流器PIM IGBT模块&#xff0c;采用TRENCHSTOP™ IGBT7、发射器控制7二极管和NTC/PressFIT技术。该模块具有增强的dv/dt可控性、改进的FWD软度、优化的开关损耗以及8μs短路稳定性。EasyPIM&#xff08;功率集成模块&#xff09;外形非常小巧…...

form 表单恢复初始数据

写表单的时候&#xff0c;想做到&#xff0c;某个操作时&#xff0c;表单恢复初始数据 this.$options.data().form form 是表单的对象 <template><div><el-dialog title"提示" :visible.sync"dialogVisible"><el-form :model"…...

MySQL—索引

这里写目录标题 索引是什么? 索引优缺点?MySQL索引类型索引底层实现? 为什么使用B树, 而不是B树, BST, AVL, 红黑树等等?什么是聚簇索引和非聚簇索引?非聚簇索引一定会回表吗?什么是联合索引?为什么需要注意联合索引中的字段顺序?什么是最左前缀原则?什么是前缀索引?…...

Android图形-合成与显示-概论

目录 引言 概念与理解 SurfaceFlinger Surface HWC Fence&#xff1a; Gralloc&#xff1a; DisplayDevice 引言 Activity是Android的主要UI相关组件。通过View的相关类和接口实现&#xff0c;在WMS的管理下&#xff0c;进行窗口和控件的测量&#xff0c;布局和绘制&am…...

Swift 5 数组如何获取集合的索引和对应的元素值

Swift 5 数组如何获取集合的索引和对应的元素值 在Swift 5中&#xff0c;你可以使用enumerated()方法来获取集合的索引和对应的元素值。这个方法会返回一个包含索引和元素的元组数组。以下是使用enumerated()方法来获取一个数组的索引和元素的示例&#xff1a; let array [1…...

计算 Nginx 日志的PV和UV

计算 Nginx 日志的 PV&#xff08;页面浏览量&#xff09;和 UV&#xff08;独立访客数&#xff09;&#xff0c;你需要使用一些工具和技术。 PV&#xff08;页面浏览量&#xff09;是指网站的所有页面被访问的总次数&#xff0c;而 UV&#xff08;独立访客数&#xff09;则是指…...

Spring中常用的注解

1.声明Bean的注解(标注在类上) Component&#xff1a;表示普通的组件&#xff0c;也可泛指下面三种组件。Controller&#xff1a;控制层。Service&#xff1a;业务逻辑层。Repository&#xff1a;数据访问层。 2.Bean的生命周期的注解 Scope表示设置Spring是如何创建Bean的…...

Plugin 插件

Plugin 插件 插件是 webpack 的支柱功能。插件目的在于解决 loader 无法实现的其他事。Webpack 提供很多开箱即用的插件。 常用插件 clean-webpack-plugin 自动清理输出目录 html-webpack-plugin 自动生成使用 bundle.js 的 HTML copy-webpack-plugin 拷贝文件到输出目…...

Structure needs cleaning fsimage文件系统损坏修复

最近清除数据的时候发现有些文件无法rm [rootnode101 application_1691504014432_0002]# rm -rf ls:* [rootnode101 application_1691504014432_0002]# ls ls: 无法访问flink-dist-cache-8f72398e-9254-42d4-a14d-a0def99b493d: Structure needs cleaning以下操作可能会删除文件…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...