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

电脑版发表于：2025/2/7 10:50

代码如下：
```
<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>
```

TeachingNote

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

{{item.title}}

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

{{item.title}}

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