Uniapp-左滑删除

已于 2024-04-16 17:46:50 修改
阅读量472 收藏 2
点赞数
分类专栏： # uni-app 文章标签： uni-app
于 2022-11-20 18:03:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hannah_Hannah_/article/details/127951799
版权

一、背景

一般运用在多个商品列表中

 二、功能

 主要有touchstart、touchmove、touchend、和一个动态绑定样式 :style

在方法中定义：

 

完整版代码 -- 与截图样式不同， 但功能一样：

<template>
	<view>
		<view style="height: 100vh;">
			<view class="bg-white" >
				<text style="font-size: 80rpx; margin-left: 87%; color: orangered;" cursor @click="add"> + </text>
				<view class="flex justify-around padding-sm" style="border-bottom: 2rpx solid #ccc;">
					<view class="text-center text-bold text-xxl">
						<view>{{ fulldate }}</view>
					</view>
				</view>
			</view>
			
			<!-- 事件展示 -->
			<view class="carList" v-if="dataList.length != 0">
				<view class="order-item flex" v-for="(item, index) in dataList" :key="index" :data-index="index"
					@touchstart="tcouchStart" @touchmove="tcouchMove" @touchend="tcouchEnd"
					:style="'right:'+item.right+'px'">
					<view style="display: flex; overflow: hidden; align-items: center;" @click="edit(item)">
						<view style="display: flex; align-items: center; overflow: hidden;">
							<view class="padding-sm">
								<image src="../../static/dot.png" style="width: 30rpx; height:30rpx;" />
							</view>
							<view class="item-info">
								<view class="text-bold text-xl margin-top-sm">{{ item.title }}</view>
								<view style="color: gray; margin-top: 20rpx;">{{ item.content }}</view>
								<view style="color: gray; margin-top: 20rpx;">{{ item.update_time }}</view>
							</view>
						</view>
					</view>
					<view class="remove" @click="itemDelClick(item.id)">删除</view>
				</view>
			</view>
			
			<view v-else style="text-align: center; margin-top: 50%;">
				<image src="../../static/empty.png" style="width: 80rpx; height: 80rpx;"></image>
				<view>暂无数据</view>
			</view>
		</view>
		
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" type="bottom">
			<view class="flex justify-between align-center padding-sm">
				<view class="text-lg" @click="cancel">取消</view>
				<view class="text-bold text-xl">新建日程</view>
				<view class="text-bold text-lg" style="color: orangered;" @click="addInfo">添加</view>
			</view>
			<view class="popup-content">
				<view>
					<view class="text-bold padding-tb-sm">标题：</view>
					<uni-easyinput v-model="title" focus placeholder="请输入标题"></uni-easyinput>
				</view>
				<view class="margin-top-sm">
					<view class="text-bold padding-tb-sm">内容：</view>
					<!-- <uni-easyinput v-model="content" focus placeholder="请输入内容" style="height: 300rpx"></uni-easyinput> -->
					<textarea v-model="content" placeholder="请输入内容" class="content_input"></textarea>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { listing } from "../../api/api.js"
	export default {
		data() {
			return {
				fulldate: '',
				dataList: [],
				title: '',
				content: '',
				id: '',
				delBtnWidth: 60,
				startX: '',
				selected: [],
			}
		},
		onLoad(props) {
			if(!!props.fulldate){
				this.fulldate = props.fulldate
				this.viewData()
			}
			this.selected = uni.getStorageSync('selected')
		},
		methods:{
			add(){
				this.id = ''
				this.title = ''
				this.content = ''
				this.$refs.popup.open()
			},
			cancel(){
				this.$refs.popup.close()
			},
			addInfo(){
				listing("miniPro/schedule", {
					date: this.fulldate, 
					title: this.title,
					content: this.content,
					id: !!this.id ? this.id : ''
				}, !!this.id ? 'PUT':'POST', true, true)
				.then((res) => {
					if (res.code == 200) {
						this.$refs.popup.close()
						this.viewData()
						if(this.selected.indexOf(this.fulldate) == -1){
							this.selected.push(this.fulldate)
						}
						
						uni.setStorageSync('selected', this.selected)
					}
				})
			},
			edit(item){
				this.title = item.title
				this.content = item.content
				this.id = item.id
				this.$refs.popup.open()
			},
			viewData(){
				listing("miniPro/schedule", {
					date: this.fulldate
				}, 'GET', false, false)
				.then((res) => {
					if (res.code == 200) {
						this.dataList = res.data
					}
				})
			},
			// 删除事件
			itemDelClick(id){
				let _this = this
				uni.showModal({
					title: '温馨提示',
					content: '是否确定删除该日程',
					success: function (res) {
						if (res.confirm) {
							listing("miniPro/schedule", {
								id: id
							}, 'DELETE', true, true)
							.then((res) => {
								if(res.code == 200){
									_this.viewData()
									// 说明记录了多条日程 -- 那么就不用删除，否则就是删除
									if(_this.dataList.length ==1){
										_this.selected = _this.selected.filter(i=>{return i != _this.fulldate})
										uni.setStorageSync('selected', _this.selected)
									}
								}
							})
						}
					}
				})
			},
			tcouchStart(e){
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			tcouchMove(e){
				for (var index in this.dataList) {
					this.$set(this.dataList[index], 'right', 0);
				}
				var touch = e.touches[0];
				var item = this.dataList[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.$set(this.dataList[e.currentTarget.dataset.index], 'right', disX);
				} else {
					this.$set(this.dataList[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			tcouchEnd(e){
				var item = this.dataList[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.$set(this.dataList[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
				} else {
					this.$set(this.dataList[e.currentTarget.dataset.index], 'right', 0);
				}
			},
		}
	}
</script>

<style lang="scss">
	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		height: 600rpx;
		background-color: #fff;
	}
	
	.carList {
		border-radius: 20rpx;
		padding: 10rpx 2% 10rpx 3%;
	}
	.order-item {
		width: 100%;
		display: flex;
		position: relative;
		margin: 20rpx auto;
		align-items: right;
		flex-direction: row;
		background: white;
		border-radius: 20rpx;
	}
	
	.item-info {
		font-size: 34rpx;
		color: #333;
		padding: 10rpx 20rpx;
		position: relative;
		overflow: hidden;
		flex: 1;
	}
	.remove {
		width: 120rpx;
		height: 100%;
		background-color: orangered;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		right: -140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		border-radius: 20rpx;
	}
	.content_input {
		height: 240rpx;
		width: 100%;
		border: 2rpx solid #2979ff;
		border-radius: 10rpx;
		padding: 20rpx;
	}
</style>

Hannah_Hannah_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp分页和左滑删除
m0_61169066的博客
03-26 522
<template> <view class="content paddingbox bgwhrite"> <!--宣传活动--> <view class="contentbox2 bgfff borderradius24"> <view class="arctilelist"> <view v-for="(item,index) in list" :key="index" :class="index==list.
uniapp左滑删除
m0_60161060的博客
09-02 1739
uniapp左滑删除 欢迎使用ay-operate插件 最近有需求为：左滑删除，整理插件代码如下： 1.ay-operate插件 可去uniapp插件市场的操作组件：左滑删除，自定义任意内容插件页面下载. 属性 属性类型说明data_transitObject需要传递数据的对象itemObject显示对象，可不传参 下面是...
uniapp实现左滑删除的效果
hcy5201314521的博客
12-29 989
参考的上面的博客。
uniapp通过触摸事件判断左滑、右滑、上滑、下滑
最新发布
m0_51431448的博客
05-09 459
【代码】uniapp通过触摸事件判断左滑、右滑、上滑、下滑。
uniapp 购物车实现左滑删除商品
qq_40326609的博客
01-17 750
uniapp 购物车实现左滑删除商品
【uni-app】uniapp如何实现左滑删除以及改造uni-ui中的swiperAction
搬砖小鱼，请多指教呦
03-23 1万+
左滑删除 或者 置顶之类的功能我们经常要实现，类似于微信的删除聊天框的结构 我就不贴图了 1-如何在uniapp中实现左滑删除 我使用的是uni-ui中的swiperAction 不得不说 性能还是不错的。大家想自己手动封装这个框架也是可以的，可以下载下来源码看看人家的实现思路，在h5和小程序上主要就是使用touchstart和touchend来监控的 插件地址：uni-swipe-action 滑动操作 - DCloud 插件市场 文档地址：action文档 代码参考：这里演示的是最常用的 可以
uniapp列表左滑删除
王延朕的博客
12-05 1182
【代码】uniapp列表左滑删除。
uniapp开发小程序-显示左滑删除效果
weixin_48596030的博客
06-07 2593
/去掉自定义组件里的图标。
uniapp-Gprinter 佳博蓝牙打印插件
11-11
http://www.html5-app.com/show/120 描述如图哈， 做原作者要收费的哈。 我也是从愿作者那花钱买来的
uniapp-cascader
11-14
基于uniapp 开发的级联选择器，支持h5和小程序，支持配置选择样式、支持配置两级和三级，支持配置单选和多选
翻扑克牌游戏-uniapp-项目源码
10-27
这是一个uniapp项目源码，翻扑克牌游戏，可使用HBuildeX开发工具选uniapp打开项目，正常编译运行，请放心下载。 相关学习参考文章(https://blog.csdn.net/zs1028/article/details/134083333) 在此游戏能学到什么：...
uniapp-table中改版uni-table插件
07-03
改版uni-table插件功能，新增单击行事件、单击某td事件、单独修改某td的字体颜色；选中行样式修改。主要修改文件uni-tr、uni-td;
echarts-uniapp-master.zip
04-12
echart的uniapp实例源码
uniapp自定义左滑删除组件
m0_49440146的博客
12-12 1289
自定义侧滑组件
uniapp左滑删除功能、小程序购物车左滑删除功能
weixin_52941842的博客
09-29 1437
uniapp左滑删除功能、小程序购物车左滑删除功能
【uni-app】列表左滑实现商品删除
Hiroomi的博客
10-28 661
左滑实现购物车商品删除
触摸事件(touchstart、touchmove和touchend)
热门推荐
weixin_42349568的博客
10-23 2万+
触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明： 　　touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 　　touchmove事件：当手指在屏幕上滑动的时候连续地触发。 　　touchend事件：当手指从屏幕上离开的时候触发。 除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。也就是存在于事件的默认参数event中。 　　touches：表示当前跟踪的触摸操作的touch对象的数组。
小程序uniapp实现左滑删除效果
LW0512的博客
11-17 6702
微信小程序实现左滑删除效果 实现效果 1，列表中侧滑删除 2，删除不同时存在 3，上下滑动与侧滑删除不影响 在本页面引入组件并使用 https://blog.csdn.net/LW0512/article/details/121378385 在需要左滑删除的地方使用 <view v-for="(item, index) in csListArrl" :key="index" :data-index="index"> <delSlideLeft :item="item" :d
uniapp购物车左滑删除商品
08-20
在 Uniapp 中实现购物车左滑删除商品的功能，你可以使用一些组件或库来实现。以下是一种常见的实现方式： 1. 首先，你需要使用 `<swiper>` 组件作为购物车列表的容器，并设置 `direction` 属性为 `horizontal`，使其能够横向滑动。 2. 在每个购物车商品项中，使用 `<swiper-item>` 组件包裹内容，并设置左滑删除的按钮。 3. 在左滑删除按钮上绑定一个事件，当用户点击按钮时，触发相应的事件处理函数。 4. 在事件处理函数中，根据商品的唯一标识（如商品ID）从购物车数组中找到对应的商品项，并将其从数组中移除。 5. 更新购物车数组后，可以选择将新的购物车数据存储在本地或发送到服务端进行更新。 下面是一个简单的示例代码，帮助你理解如何实现购物车左滑删除商品的功能： ```vue <template> <div> <swiper class="cart-swiper" direction="horizontal"> <swiper-item v-for="item in cartItems" :key="item.id"> <div class="cart-item"> <div class="item-content"> {{ item.name }} - {{ item.price }} </div> <div class="delete-btn" @click="removeFromCart(item.id)"> 删除 </div> </div> </swiper-item> </swiper> </div> </template> <script> export default { data() { return { cartItems: [ { id: 1, name: '商品1', price: 10 }, { id: 2, name: '商品2', price: 20 }, { id: 3, name: '商品3', price: 30 } ] } }, methods: { removeFromCart(itemId) { this.cartItems = this.cartItems.filter(item => item.id !== itemId); } } } </script> <style scoped> .cart-swiper { width: 100%; height: 100%; } .cart-item { display: flex; align-items: center; height: 100px; } .item-content { flex: 1; } .delete-btn { width: 100px; background-color: red; color: white; text-align: center; } </style> ``` 以上示例代码使用了 `<swiper>` 和 `<swiper-item>` 组件来实现左滑删除功能，需要注意的是，你可能还需要根据实际情况对样式进行调整。希望能帮到你！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值