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>
相关推荐
冬奇Lab5 分钟前
每日一个开源项目(第137篇):Penpot - 真正开源的设计协作工具,SVG 原生格式消灭设计-开发鸿沟
前端·开源·设计
nuIl23 分钟前
实现一个 Coding Agent(7):Skills
前端·agent·cursor
nuIl28 分钟前
实现一个 Coding Agent(8):会话持久化与多会话
前端·agent·cursor
jt君424262 小时前
React Native JSI 深入剖析 — 第 5 部分中文技术整理:用 HostObject 把 C++ 类暴露给 JavaScript
前端·react native
胡萝卜术2 小时前
滑动窗口最大值:从暴力到单调队列,层层优化全解析
前端·javascript·面试
fluffyox2 小时前
Notion 的公式栏里,藏着一台虚拟机——逆向 + 用 600 行 JS 复刻它的编译器与栈式 VM
前端
kyriewen3 小时前
2026 年了,这 6 个 npm 包可以卸载了——浏览器原生 API 已经能替代
前端·javascript·npm
Csvn5 小时前
Monorepo 迁移血泪史:从 Multi-Repo 到 Turborepo,这 3 个坑我帮你踩完了
前端
星栈6 小时前
Dioxus 多页面怎么做:`dioxus-router`、嵌套路由、`Outlet` 和页面组织,一篇给你讲顺
前端·rust·前端框架
用户987409238876 小时前
用 Remotion + edge-tts 打造中文教学视频全自动流水线
前端