原

vue3 ts uni-app 微信小程序抽屉菜单的使用。抽屉菜单的打开关闭。基本模板。解决抽屉菜单的滚动穿透

135人阅读 2025/2/7 10:50 总访问：789334 评论：0 收藏：0 手机

分类: 前端

代码如下：
```
<template>
  
  <page-meta
    :page-style="'overflow:' + (state.popupShow ? 'hidden' : 'visible')"
  ></page-meta>

	<view>
		 <view class="pm-ch-more" @tap="openMoreTask()">更多 ></view>
	
		 <uni-drawer
		  ref="moreTaskRef"
		  @change="drawerChange"
		  mode="right"
		  >
		  <view class="scroll-view">
			<scroll-view class="scroll-view-box" scroll-y="true">
			  <view class="close">
				<button @tap="closeMoreTask()">
				  <text class="word-btn-white">关闭Drawer</text>
				</button>
			  </view>
			  <view class="info-content" v-for="item in 10" :key="item">
				<text>可滚动内容 {{ item }}</text>
			  </view>
			</scroll-view>
		  </view>
		</uni-drawer>
  	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'


const state = reactive({
  popupShow: false,
})

const drawerChange = (e: any) => {
  state.popupShow = e
}



const moreTaskRef = ref()
// 打开
const openMoreTask = ()=>{
  moreTaskRef.value.open()
}
// 关闭
const closeMoreTask = ()=>{
  moreTaskRef.value.close()
}

</script>
```

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

TeachingNote

这一生多幸运赶上过你.

博主信息

排名

文章

粉丝

文章类别

.net 38篇

后端 8篇

ORM 16篇

前端 92篇

随笔 16篇

移动开发 6篇

数据库 8篇

英语 3篇

rabbitmq 1篇

.net core 7篇

unity 1篇

k8s 1篇

云服务 1篇

DDD 1篇

网络 1篇

vue3 ts uni-app 微信小程序抽屉菜单的使用。抽屉菜单的打开关闭。基本模板。解决抽屉菜单的滚动穿透

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}

vue3 ts uni-app 微信小程序 抽屉菜单的使用。抽屉菜单的打开关闭。基本模板。解决抽屉菜单的滚动穿透

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}

vue3 ts uni-app 微信小程序抽屉菜单的使用。抽屉菜单的打开关闭。基本模板。解决抽屉菜单的滚动穿透