uniapp 抽屉实现左滑

直接上代码

js 复制代码
<template>
	<view style="height: 100vh;background-color: #fff;" @touchstart="touchStart" @touchend="touchEnd">
		<view class="" style="width: 100rpx;height: 100rpx;background-color: red;" @click="showDrawer">点击</view>
		<uni-drawer ref="showRight" mode="left" width="320">
			<scroll-view style="height: 100%;" scroll-y="true">

			</scroll-view>
		</uni-drawer>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				startX: 0, 
				endX: 0,
				info: {}
			}
		},
		computed: {},
		methods: {
			touchStart(e) {
				this.startX = e.changedTouches[0].clientX;
			},
			touchEnd(e) {
				this.endX = e.changedTouches[0].clientX;
				const moveDis = this.startX - this.endX;
				console.log(moveDis);
				if (moveDis == 0) return;
				if(moveDis < -25) {
					this.showDrawer();
				}
			},
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
		}
	}
</script>
<style scoped lang="scss">
</style>
相关推荐
码艺-Alimjan20 分钟前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_1 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒1 小时前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技1 小时前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端
yivifu2 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub
默_笙3 小时前
🛴 从散件到整机:DeepAgents 与 Agent 身上预留的那些"插槽"(前置介绍)
前端·javascript
zhangzeyuaaa3 小时前
深入理解 Ruby 运算符:本质、分类、坑点与重载实战
开发语言·前端·ruby
一木 之林3 小时前
DeepSeek Agent 开发(一)
开发语言·前端·javascript
树下水月4 小时前
Typora破解
linux·服务器·前端
用户5508492902565 小时前
CSS布局实战:从Flex到Grid的完整避坑指南
前端