uniapp移动端实现商品拖拽集合,一行多个商品左滑删除功能!

许久未见,最近遇到一个产品,他是第一次做产品。总是有一些反人类的设计。没错,就是标题上的拖拽集合,以及商品的左滑删除。这种功能放眼各大app我都没找到有用这种设计的,他口口声声说他用过会找给我看,我等了许久,或许是他忘记了吧。

遇到这种需求,我也尝试和他沟通,比如使用购物车来删除商品等等,换一些大家都能接受的逻辑,但是他有自己的想法,我只好选择尊重。

1.拖拽集合功能

拖拽集合功能我寻找很久后使用了一款大神写的拖拽插件,并对其进行了相应的适配,因为我这个需求不需要显示上的集合,在集合的时候是跳转页面,所以在使用上会有一些修改,但是总体上是类似的,一下是插件官网,大家可以参考:

vue.draggable中文文档 - itxst.com

注意:在开发的时候监听拖拽开始和结束事件的时候会提示报错,如果有这个建议大家自行解决或者采用和我一样的方式监听拖动过程等,这个因需求而异。最后附上代码:

<template><div id="app"><h1>商品列表</h1><div class="container"><div class="row"><!-- @change="onDragEnd"  @start="start" @end="onEnd" :move="onMove" delay="1000" --><div class="col-md-6"><draggable v-model="leftItems" :group="group" delay="1000"@change="onDragEnd" :move="onMove"animation="300"  dragClass="dragClass" ghostClass="ghostClass">
<!-- 						<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in leftItems" :key="item.id" @click="click" @open="open":options="options"> --><div class="item" v-for="(item, index) in leftItems" :key="item.id" >{{ item.name }}</div><!-- </u-swipe-action> --></draggable></div><div class="col-md-6"><draggable v-model="rightItems" :group="group"@change="onDragEnd" :move="onMove"><div v-for="(item, index) in rightItems" :key="index" @longpress="aaa(index)" :class="['item',item.status==true?'shake':'']">{{ item.name }}</div></draggable></div></div></div></div>
</template>
<script>import draggable from 'vuedraggable';export default {components: {draggable},data() {return {disabled: false,btnWidth: 180,show: false,options: [{text: '删除',style: {backgroundColor: '#dd524d'}}],timerId: null,//计时器idgroup: {name: "itxst",pull: true, //可以拖出put: true, //可以拖入},leftItems: [{id: 1,show: false,status: false,name: '商品1'},{id: 2,show: false,status: false,name: '商品2'},{id: 3,show: false,status: false,name: '商品3'},{id: 4,show: false,status: false,name: '商品4'},{id: 5,show: false,status: false,name: '商品5'},{id: 6,show: false,status: false,name: '商品6'},],rightItems: [{id: 1,show: false,status: false,name: '商品1'},{id: 2,show: false,status: false,name: '商品2'},{id: 3,show: false,status: false,name: '商品3'},{id: 4,show: false,status: false,name: '商品4'},{id: 5,show: false,status: false,name: '商品5'},{id: 6,show: false,status: false,name: '商品6'},]};},onLoad() {},methods: {click(index) {this.leftItems.splice(index, 1);this.$u.toast(`删除了第${index}个cell`);},// 如果打开一个的时候,不需要关闭其他,则无需实现本方法open(index) {// 先将正在被操作的swipeAction标记为打开状态,否则由于props的特性限制,// 原本为false,再次设置为false会无效this.leftItems[index].show = true;this.leftItems.map((val, idx) => {if(index != idx) this.leftItems[idx].show = false;})},start(e) {console.log(e, 'kasihi ');},onEnd() {console.log(e, '结束了 ');},onMove(e) { // keyi huanyuanclearTimeout(this.timerId)console.log('如果能监听到要在这里清楚计时器');return this.canFormSet()},aaa(index) {this.rightItems[index].status = truethis.timerId = setTimeout(() => {this.rightItems[index].status = falseclearTimeout(this.timerId)}, 500)},onDragEnd(event) {console.log(event);// if (event.newIndex !== event.oldIndex) {// const movedItem = this.leftItems[event.oldIndex];// this.leftItems.splice(event.oldIndex, 1);// this.rightItems.push(movedItem);// 判断是否可以形成集合跳转页面if (this.canFormSet()) {// 跳转到另一个页面的逻辑console.log('路由去往新的页面');// this.$router.push('/another-page');} else {// 如果不能形成集合,则复原console.log('复原');// this.rightItems.pop();// this.leftItems.splice(event.newIndex, 0, movedItem);}console.log('6666');clearTimeout(this.timerId)//   } else {// console.log('else');//     // Revert the move if it's not a valid combination//     const movedItem = this.rightItems.pop();//     this.leftItems.splice(event.newIndex, 0, movedItem);//   }},canFormSet() {// 如果可以形成集合,返回 true;否则返回 falsereturn false; // 示例中默认返回 true}}};
</script><style scoped lang="scss">.shake {width: 100px;height: 100px;background-color: red;transform-origin: center;animation: shake .5s infinite ease-in-out;}@keyframes shake {0%,100% {transform: rotate(-5deg);/* transform: translate(-50%, -50%) rotate(-5deg); */}50% {transform: rotate(5deg);}}.ghostClass {background-color: blue !important;}.chosenClass {background-color: red !important;opacity: 1 !important;}.dragClass {background-color: blueviolet !important;opacity: 1 !important;box-shadow: none !important;outline: none !important;background-image: none !important;}.container {width: 100%;margin-top: 20px;}.row {width: 100%;display: flex;}.col-md-6 {width: 100%;// display: flex;// flex-wrap: wrap;}.item {width: 100px;height: 100px;margin-left: 20px;border: 1px solid #ccc;padding: 10px;margin-bottom: 10px;background-color: #f9f9f9;}
</style>

2.一行多个商品滑动删除功能

上面的代码大家也看到了 我计划使用 u-swipe-action 来实现滑动删除功能,但是它只能一行滑动删除。所以我看了一下源码,然后有所顿悟,手搓了一个一行多个的删除效果代码,后期也会进行一些优化,废话不多说,代码给大家参考,希望能帮到你:

<template><view class="container"><movable-area class="box-info" v-for="(item, index) in items":key="index"><movable-viewstyle="width: 140px; height: 100px; background-color: #aa55ff;":style="{widh}":x="index * 10":direction="'horizontal'":out-of-bounds="false"><view class="product"><view style="width: 100px;">{{item}}</view><view class="move" @click="removeShop">删除</view></view></movable-view></movable-area></view>
</template><script>
export default {data() {return {items: ['商品1', '商品2']};},methods: {removeShop(index) {alert('删除商品操作')}}
};
</script><style scoped lang="scss">
.container {display: flex;justify-content: center;align-items: center;height: 100%;.box-info {display: flex;flex-wrap: wrap;height: 100px; width: 100px; background-color: #55ff7f;overflow: hidden;margin: 20px;.product {display: flex;justify-content: center;align-items: center;font-size: 14px;color: #333;.move{background-color: #55aa00;width: 40px;height: 100px;writing-mode: vertical-rl; display: flex;justify-content: center;align-items: center;}}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/43743.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL GROUP_CONCAT 函数详解与实战应用

提示&#xff1a;在需要将多个值组合成一个列表时&#xff0c;GROUP_CONCAT() 函数为 MySQL 提供了一种强大的方式来处理数据 文章目录 前言什么是 GROUP_CONCAT()基本语法 示例使用 GROUP_CONCAT()去除重复值排序结果 前言 提示&#xff1a;这里可以添加本文要记录的大概内容…

16:9横屏短视频素材库有哪些?横屏短视频素材网站分享

在这个视觉内容至关重要的时代&#xff0c;16:9横屏视频因其宽广的画面和优越的观赏体验&#xff0c;已经成为无数创作者和营销专家的首选格式。但要创造出吸引人的横屏视频&#xff0c;高质量的视频素材库是不可或缺的。不管你是资深视频制作人还是刚入行的新手&#xff0c;下…

02day-C++学习(const 指针与引用的关系 inline nullptr)

02day-C学习 1. 使用const注意事项 注意事项 • 可以引⽤⼀个const对象&#xff0c;但是必须⽤const引⽤。const引⽤也可以引⽤普通对象&#xff0c;因为对象的访 问权限在引⽤过程中可以缩⼩&#xff0c;但是不能放⼤。 • 不需要注意的是类似 int& rb a3; double d 1…

SVM - 径向基函数核 Radial Basis Function Kernel,简称RBF核或者高斯核

SVM - 径向基函数核 Radial Basis Function Kernel&#xff0c;简称RBF核或者高斯核 flyfish 径向基函数核&#xff08;Radial Basis Function Kernel&#xff0c;简称RBF核&#xff09;&#xff0c;也称为高斯核&#xff0c;是一种常用的核函数&#xff0c;用于支持向量机&a…

2025考研~数据结构试卷

作者主页&#xff1a;知孤云出岫 数据结构试题 [TOC](数据结构试题)数据结构试卷一、选择题&#xff08;每题2分&#xff0c;共20分&#xff09;二、填空题&#xff08;每题3分&#xff0c;共15分&#xff09;三、简答题&#xff08;每题10分&#xff0c;共40分&#xff09;四…

15.分频器设计--偶分频

设计一个六分频时钟信号 &#xff08;1&#xff09;visio视图&#xff1a; &#xff08;2&#xff09;Verilog代码&#xff1a; module divider_six(clk,reset_n,clk_out);input clk;input reset_n;output reg clk_out;reg [1:0]cnt;//计数器模块设计 always(posedge clk o…

突破传统,实时语音技术的革命。Livekit 开源代理框架来袭

🚀 突破传统,实时语音技术的革命!Livekit 开源代理框架来袭! 在数字化时代,实时通信已成为我们日常生活的一部分。但你是否曾想象过,一个能够轻松处理音视频流的代理框架,会如何改变我们的沟通方式?今天,我们就来一探究竟! 🌟 什么是 Livekit 代理框架? Live…

大数据基础:Hadoop之HDFS重点架构原理

文章目录 Hadoop之HDFS重点架构原理 一、什么是Hadoop 二、HDFS简介 三、HDFS架构 3.1、NameNode 3.2、SecondaryNameNode 3.3、DataNode 3.4、Client 四、fsimage和editslog合并 五、Block副本放置策略 六、读写流程 6.1、HDFS写文件流程 6.2、HDFS读文件流程 Ha…

2024年7月1日,公布的OpenSSH的漏洞【CVE-2024-6387】

目录 ■概要 ■概要&#xff08;日语&#xff09; ■相关知识 openssh 和 ssh 有区别吗 如何查看 openssh的版本 漏洞描述 glibc Linux是什么 如何查看系统是不是基于 Gibc RHEL Linux 是基于Glibc的Linux吗 还有哪些 Linux版本是基于 GNU C库&#xff08;glibc&…

JustAuth实现多个钉钉扫码登录

需求&#xff1a; 实现多个钉钉组织的用户绑定和扫码登录。 JustAuth框架实现钉钉扫码登录用到的dingTalk接口&#xff1a; https://oapi.dingtalk.com/connect/qrconnecthttps://oapi.dingtalk.com/connect/oauth2/sns_authorize根据sns临时授权码获取用户信息 https://oap…

Java基础之Stringjoiner

Stringjioiner的概述 StringJoiner跟StringBuilder一样&#xff0c;也可以看成是一个容器&#xff0c;创建之后里面的内容是可变的。作用:提高字符串的操作效率&#xff0c;而且代码编写特别简洁&#xff0c;但是目前市场上很少有人用。 Stringjoiner的构造方法 Stringjoiner…

软件许可证优化怎么做最好!

在当今数字化发展的浪潮中&#xff0c;软件许可证的优化成为了 IT 总监们面临的一项重要挑战。在许可数量受限的情况下&#xff0c;如何将现有许可发挥最大利用率&#xff0c;是一个亟待解决的问题。 信息采集是优化的基础。 我们需要采集关于软件使用频率、使用时长、用户部门…

05.C1W4.Machine Translation and Document Search

往期文章请点这里 目录 OverviewWhat you’ll be able to do!Learning Objectives Transforming word vectorsOverview of TranslationTransforming vectors Align word vectorsSolving for RFrobenius normFrobenius norm squaredGradient K nearest neighborsFinding the tr…

【1.2】动态规划-买卖股票的最佳时机

一、题目 给定一个数组&#xff0c;它的第i个元素是一支给定的股票在第i天的价格。设计一个算法来计算你所能获取的最大利润。你最多可以完成两笔交易。 注意&#xff1a;你不能同时参与多笔交易&#xff08;你必须在再次购买前出售掉之前的股票&#xff09;。 示例 1: 输入&a…

运用sessionId redis中获取用户的信息rg.springframework.session.SessionRepository

这个类是 org.springframework.session.SessionRepository 接口&#xff0c;它定义了操作 Session 的基本方法。SessionRepository 是 Spring Session 框架的一部分&#xff0c;用于管理和存储用户的 HTTP Session。下面是这个接口的详细解释&#xff1a; SessionRepository&l…

Sentinel-1 Level 1数据处理的详细算法定义(二)

《Sentinel-1 Level 1数据处理的详细算法定义》文档定义和描述了Sentinel-1实现的Level 1处理算法和方程&#xff0c;以便生成Level 1产品。这些算法适用于Sentinel-1的Stripmap、Interferometric Wide-swath (IW)、Extra-wide-swath (EW)和Wave模式。 今天介绍的内容如下&…

C++:CV::Point函数简介

cv::Point 是 OpenCV 库中用于表示二维坐标系下点的一个基本数据类型。它提供了在图像处理、计算机视觉等领域中定位和操作点的能力。以下是关于 cv::Point 的详细介绍&#xff1a; 基本属性 类型&#xff1a;cv::Point 是一个模板类&#xff0c;通常用于处理整数坐标&#x…

解决打印PDF文本不清楚的处理办法

之前打印PDF格式的电子书&#xff0c;不清晰&#xff0c;影响看书的心情&#xff0c;有时看到打印的书的质量&#xff0c;根本不想看&#xff0c;今天在打印一本页数不多&#xff0c;但PDF格式的书感觉也不太清楚&#xff0c;我想应该有办法解决&#xff0c;我使用的是解决福昕…

2017年,我成为了技术博主

2017年9月&#xff0c;我已经大三了。 >>上一篇&#xff08;爪哇&#xff0c;我初窥门径&#xff09; 我大二学了很多java技术&#xff0c;看似我一会就把javaweb/ssh/ssm这些技术栈给学了。 这些技术确实不难&#xff0c;即便是我&#xff0c;我都能学会&#xff0c;…

可以添加todo清单桌面小组件的便签哪个好?

在我们快节奏的生活中&#xff0c;有效的时间管理和任务追踪是必不可少的。为了实现这一目标&#xff0c;许多人选择使用桌面便签&#xff0c;尤其是那些具有Todo清单桌面小组件的便签。但是&#xff0c;面对市场上众多选择&#xff0c;可以添加todo清单桌面小组件的便签哪个好…