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>
相关推荐
小码哥_常8 分钟前
告别繁琐!手把手教你封装超实用Android原生Adapter基类
前端
skywalk816326 分钟前
pytest测试的时候这是什么意思?Migrating <class ‘kotti.resources.File‘>
前端·python
一只蝉nahc1 小时前
vue使用iframe内嵌unity模型,并且向模型传递信息,接受信息
前端·vue.js·unity
子兮曰1 小时前
Bun v1.3.12 深度解析:新特性、性能优化与实战指南
前端·typescript·bun
2401_885885042 小时前
易语言彩信接口怎么调用?E语言Post实现多媒体数据批量下发
前端
a1117762 小时前
Three.js 的前端 WebGL 页面合集(日本 开源项目)
前端·javascript·webgl
Kk.08022 小时前
项目《基于Linux下的mybash命令解释器》(一)
前端·javascript·算法
小李子呢02113 小时前
前端八股---闭包和作用域链
前端
IT_陈寒4 小时前
Redis的内存溢出坑把我整懵了,分享这个血泪教训
前端·人工智能·后端
m0_738120724 小时前
渗透测试基础ctfshow——Web应用安全与防护(五)
前端·网络·数据库·windows·python·sql·安全