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>
相关推荐
im_AMBER7 分钟前
万字长文:从零实现 JWT 鉴权
前端·react.js·express
发量浓郁的程序猿8 分钟前
uniapp vue3手搓签名组件
前端
Julyued9 分钟前
vue3开发echarts热力图
前端·echarts
本末倒置18311 分钟前
拒绝繁琐配置!用 Tailwind CSS 3 搞定多主题 + 暗色模式切换,这套方案谁用谁香
前端
发量浓郁的程序猿13 分钟前
pdfjsLib预览本地PDF文件,操作栏不展示下载、打印双页操作
前端
We་ct40 分钟前
LeetCode 34. 在排序数组中查找元素的第一个和最后一个位置:二分查找实战
前端·算法·leetcode·typescript·二分
Nan_Shu_61440 分钟前
学习:Cesium (4)
前端·学习
Loadings1 小时前
聊聊 AI Coding 的最新范式:Harness Engineering:我们这群程序员,又要继续学了?
前端·后端
ssshooter1 小时前
哈希是怎么被破解的?
前端·后端