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>
相关推荐
程序员黑豆12 小时前
鸿蒙应用开发:AppStorage 全局状态存储用法教程
前端·harmonyos
猫猫不是喵喵.12 小时前
Vue3 中 computed 计算属性与 watch、watchEffect 监听
前端·javascript·vue.js
En^_^Joy12 小时前
Vue项目创建与入口配置全攻略
前端·vue.js·arcgis
爱码小白12 小时前
importlib模块
开发语言·前端·python
猫猫不是喵喵.13 小时前
Vue2 的 Vuex 状态管理与 Vue3 的 Pinia 状态管理
前端·javascript·vue.js
greenbbLV13 小时前
中小公司积分商城选型:SaaS与私有化方案对比解析
大数据·前端·小程序
NutShell Wang14 小时前
Vite 8.1 深度拆解:Rolldown 统一打包器如何终结前端构建的「双引擎时代」
前端·rust·开源·vite·开发者工具·vibe coding
朱容zr33313314 小时前
请解释“回表”的概念。
java·前端·数据库
leslie11815 小时前
webpack笔记
前端·webpack
宁风NF15 小时前
JavaScript:内存、垃圾回收、性能优化
开发语言·前端·javascript·学习·性能优化·es6