微信小程序 - 详细实现列表拖曳排序功能效果，小程序如何实现列表的拖动排序功能，用户拖动并放手完成排序操作（详细示例代码，一键复制运行）

已于 2024-02-01 23:46:35 修改
阅读量2.6k 收藏 6
点赞数 3
分类专栏： + Wechat 文章标签： 微信小程序 拖曳排序 列表拖动排序操作 小程序列表拖动排序组件 用手指拖动某个列表到其他地方 列表排序怎么做 如何完成一个列表的手动拖曳排序
于 2020-08-18 15:34:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/108077649
版权
+ Wechat 专栏收录该内容
119 篇文章 967 订阅 ¥19.90 ¥99.00
订阅专栏

效果图

网上的教程都很难用，本文做优质文章。

在微信小程序开发中，详细实现用户拖曳列表进行排序的功能，自己更改拖动时、经过时、放下时的样式！

可以根据你自己的需求，进行样式改造，代码注释详细。

如下图所示，用户按住某个列表后进行拖动即可完成排序。

示例代码干净整洁，无任何乱七八糟的样式！

在这里插入图片描述

完整源码

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
订阅专栏
微信小程序 - Setting data field “xxx“ to undefined is invalid.报错原因及解决方案
王佳斌
10-31 2万+
前言 ## 完整报错(SEO) ## 翻译: 将数据字段“XXX”设置为未定义是无效的。 Setting data field "xxx" to undefined is invalid. 这种情况是由于页面 setData "xxx（变量）" 的时候，没有获取到值。 然后就会将 undefined 给 xxx（变量） 字段，此时默认字段就会变成 undefined ，那么就会出现这种警告。 解决 判断是否存在。 在没有 setData 之前，先判断获取到的值是否存在（也可以 setData 里面判
微信小程序 - 详细实现打开跳转第三方 H5 网页链接，在微信小程序内直接跳转打开第三方网站链接详细教程（支持跳转公众号文章等，直接复制代码即可）
热门推荐
王佳斌
04-01 2万+
小程序跳转h5，小程序 - Taro小程序中打开h5页面链接，...小程序跳转h5链接(web-view)_微信小程序，小程序如何跳转h5页面，小程序跳转到第三方H5网页，微信小程序跳转第三方H5的方法，小程序-实现怎么跳转打开 H5 网页链接(或跳转至公众号文章
微信小程序代码实现：拖拽排序列表
06-21
利用movable-view， movable-area实现小程序拖拽功能。
wx-drag-sort:微信小程序拖拽排序
05-09
wx-drag-sort 微信小程序拖拽排序
微信小程序-长按拖动楼层、左右滑动出现删除按钮实现
12-01
1、长按可以处在拖动状态，可以上下拖动调节排序，楼层还可以左右滑动出现后出现删除按钮，点击会将楼层删除掉。 2、滚动效果绝佳，不卡顿，轻松实现楼层以及商品拖动排序以及管理 3、里面文件是一整个拖动小程序项目，只要下载下来在微信小程序中打开即可看到完整的效果 4、喜欢的小伙伴可以下载下来，不懂的可以私聊我，公共解决问题。
【微信小程序-原生开发】列表 - 拖拽排序（官方组件 movable-area 和 movable-view 的用法）
朝阳39的博客
03-16 1764
实现逻辑详见代码的注释。
小程序自定义拖动排序（uniapp)
qq_45314219的博客
10-18 5669
点击拖动：设置可移动区域，循环数组，movable-view写要移动的盒子（用点击事件点击要移动的数据进行克隆，把数据从当前数组中摘取出来放入movable-view进行移动），再利用onChange事件捕捉x,y轴，利用设置的盒子高度和当前获取的y轴数据判断当前数组的下标。2） @touchend（拖动离开事件），movable-view的onChange事件,自定义克隆事件dragChange，自定义顶置事件overheadChange。3.onChange事件捕捉x,y轴，获取移动的下标。
微信小程序使用wxs实现拖拽排序
cyongxing的博客
09-21 505
使用小程序进行拖拽排序时，发现由于频繁的setData更改坐标，拖动的时候会产生很大的卡顿，然后发现使用wxs可以解决这个卡顿问题。
微信小程序长按拖拽排序
最新发布
m0_55969466的博客
01-02 1116
微信小程序长按拖拽排序。
基于movable-view的微信小程序拖拽排序（含源码）
m0_64130892的博客
03-05 3258
最近在做一个账本，里面有个功能需要“拖拽排序”，网上的代码我也看不太懂，打算自己写一个。微信小程序官方给了一个可移动的盒子movable-view ，基于这个我们来实现一个简单的拖拽排序功能。可以自定义一行展示多少个图标，下面演示一行五个的情况。由于这是我花三个小时写出来的，肯定存在很多不足，欢迎在评论区里不吝赐教！
微信小程序拖拽排序列表
Simorel的私人剧场
01-15 2848
拖拽排序列表 思路 界面分为两层： 底层，正常列表展示，拖拽的时候不做处理（大牛直接加了动画，原谅我技艺不精，还没实现） 顶层，movable-view组件，不长按不展示，之后长按才展示，且没有点击事件。 事件 主要监听：longpress , touchmove , touchend 三个事件 longpress 保障长按才有效，并设定许多其他值。 touchmove 滑动的时候触发 判断...
微信小程序-首字母排序选择功能开发.zip
04-20
微信小程序-首字母排序选择功能开发.zip，小程序模板代码，可以直接从源码里粘贴复制过来，虽然这样做不利于自己独立编写代码。
最简单的微信小程序拖拽排序列表.zip
01-04
最简单的微信小程序拖拽排序列表
微信小程序实现手指拖动选项排序
10-15
主要介绍了微信小程序实现手指拖动选项排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序--实现多个按钮toggle功能
03-29
如下图所示，实现该按钮toggle功能。百度上很多都是只设置一个按钮的toggle，所以我现在来稍微总结下：多个按钮如何实现自身的toggle功能。原理：1，列表展示的时候，我们会用wx:for 来循环数据，那么我们就会得到相...
微信小程序 - 【关闭提示】根据 sitemap 的规则[0]，当前页面 [pages/index/index] 将被索引
王佳斌
07-30 2万+
前言 不知道你讨不讨厌下面这段警告提示，虽然不是报错，但就想 关闭它！！！ 关闭警示 在小程序目录里找到 project.config.json，找到 setting 配置对象，将 checkSiteMap 设置为 false ，最后保存重启开发者工具即可。 "setting": { "checkSiteMap": true, } 如果首次创建小程序项目，可能没有这个属性，请重启后第二次编译。 ...
微信小程序 - 详细实现日期时间选择器功能组件效果，从底部弹出 “年月日时分秒“ 选择器，官方 picker 组件二次封装功能强大，支持自定义要不要 “秒“（详细组件+使用示例源码，一键复制即可使用）
王佳斌
05-23 1万+
您只需要跟着步骤一路复制粘贴，最后看一下使用示例即可。在微信小程序开发中，实现一个日期时间选择器功能组件，支持自定义 “带秒数”，官方组件完美无bug！由于微信官方的组件不支持同时选择年月日时分，所以在此官方组件上再次封装，可靠性毋庸置疑。您将获得一个可选择年月日时分 / 年月日时分秒日期选择器组件，您可以通过一个属性来自由切换要不要“秒”
微信小程序 - 最新获取用户昵称 / 头像（wx.getUserProfile 接口被废弃后的代替方案）详细教程，2022 年之后的所有微信小程序，获取用户信息最新详细教程，附带示例源代码
王佳斌
02-19 1万+
微信小程序wx.getUserProfile接口废了用什么代替，微信小程序wx.getUserProfile不能用了怎么办，wx.getUserProfile 失效有什么替代方案吗，微信新规定头像昵称填写最新教程，目前微信小程序最新获取用户头像昵称教程，微信小程序用户头像昵称获取规则调整公告，2022改版后的微信小程序如何获取用户头像和昵称信息，微信小程序官方废弃getUserProfile后如何实现获取用户信息，微信小程序wx.getUserProfile接口返回了默认头像昵称， 微信小程序获取用户信息不
微信小程序 - 页面插入广告（激励式广告）超详细教程
王佳斌
03-28 1万+
前言 例如，李拴蛋在小程序观看付费电影，他没有钱支付，此时小程序开发者允许他通过观看一条广告，来获取观看资格。 小程序开发者通过植入广告，让 用户观看广告 来获得了收益， 本文将站在小白的角度，从 0 到 1 完成（贼清晰代码及注释）广告植入及其整个闭环流程。 广告形式 微信小程序（不含小游戏）允许植入 4 种广告形式，其具体展现形式及特点，详见 官方文档。 本文主要阐述 激励式广告（非小游戏），如下图所示： 开通流量主 并非所有小程序都可以插入广告，请检查您的小程序是否开通了流量主。 开通
微信小程序实现列表的上下拖拽排序
04-22
好的，针对您的问题，实现微信小程序中列表的拖拽排序，可以考虑采用以下步骤： 1. 在wxml文件中，将列表项用<block>或者<view>组合起来，每个列表项可以包含一个拖拽手柄和相应的数据绑定。 2. 在js文件中，为每个列表项设置一个唯一的id，并在data中初始化一个数组来存储列表数据。 3. 监听列表项的touchstart、touchmove、touchend事件，通过计算手指移动距离来确定拖拽的位置，并更新数据绑定。 4. 在列表数据发生变化时，更新data中存储的数组，在wxml中通过wx:for循环渲染出列表项，并将拖拽排序后的数据绑定渲染出来。 以上四步是实现微信小程序中列表的拖拽排序的基本流程。具体的实现细节可以根据实际需求进行调整和优化。 但是，我需要提醒您的是，微信小程序的API和功能一直在不断更新和改进，因此，以上的方案只是当前可行的一种方案，其可能随着微信小程序的版本更新而失效或发生变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值