uniapp微信小程序抽屉侧滑菜单组件

抽屉侧滑菜单是一种非常流行的UI布局方式。

在微信小程序中，如何实现抽屉侧滑菜单呢？

如果是使用uniapp开发微信小程序，就非常简单了。uniapp提供了一个抽屉侧滑菜单组件。

先去插件市场（https://ext.dcloud.net.cn/plugin?name=uni-drawer），点击安装组件。

使用如下：

<template>
	<view>
		<button @click="showDrawer" type="primary">右侧弹出 显示Drawer</button>
		<uni-drawer ref="showRight" mode="right" :mask-click="false">
			<scroll-view style="height: 100%;" scroll-y="true">
				<button @click="closeDrawer" type="primary">关闭Drawer</button>
				<view v-for="item in 60" :key="item">可滚动内容 {{ item }}</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	export default {
		methods: {
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			}

		}
	}
</script>

更详细的使用方法可参考文档：https://uniapp.dcloud.io/component/uniui/uni-drawer.html