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>
相关推荐
IT_陈寒12 小时前
JavaScript实战技巧总结
前端·人工智能·后端
玲小珑12 小时前
AI Coding 与 Harness 实践精髓:让AI高效干活、持续交付
前端·人工智能·openai
skilllite作者12 小时前
Agent-Skills 核心能力与实战效能深度评测
大数据·开发语言·前端·数据库·人工智能·python
恋猫de小郭12 小时前
实用性 Max ,新 Flutter & Dart Agent Skills 深度解读
android·前端·flutter
一诺加油鸭12 小时前
若依(RuoYi)框架中普通用户角色登录后访问接口报 403 “当前操作没有权限”错误的完整解决方案
前端
宁雨桥13 小时前
AI前端开发面试题分享
前端·人工智能·ai
亿元程序员13 小时前
求求你别卷了,主管又转发你的文章到工作群了...我看了之后五味杂陈,决定卷个毛线!
前端
kyriewen1113 小时前
你的前端滤镜慢得像PPT?用Rust+WebAssembly,一秒处理4K图
开发语言·前端·javascript·设计模式·rust·ecmascript·powerpoint
QD_ANJING13 小时前
建议5月的Web前端开发都去飞书上准备面试...
前端·人工智能·面试·职场和发展·前端框架·状态模式·ai编程