抽屉侧滑菜单是一种非常流行的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
-
微信小程序隐私协议弹框不弹微信小程序隐私协议弹框不弹
-
监听菜单按钮(右上角胶囊按钮)的布局位置信息变化事件wx.onMenuButtonBoundingClientRectWeightChange 为微信小程序监听菜单按钮(右上角胶囊按钮)的布局位置信息变化事件API。
-
担心WordPress REST API暴露用户名?这里有一个简单的屏蔽方法!在深入探讨WordPress REST API的利用与功能时,追格小编虽已分享了多篇相关内容,但我们依然理解,部分用户可能仍对网站用户名暴露的问题心存顾虑,尤其是当他们并不需要使用到如古腾堡编辑器或小程序等特定功能时。针对这一关切,今天小编特地为大家介绍一种有效的屏蔽方法。
-
wx.getDeviceBenchmarkInfo 获取设备性能得分和机型档位数据APIwx.getDeviceBenchmarkInfo是微信小程序获取设备性能得分和机型档位数据API。
-
wx.openHKOfflinePayView 拉起WeChat Pay HK付款码APIwx.openHKOfflinePayView是微信小程序拉起WeChat Pay HK付款码API。
-
微信小程序打开任意公众号文章 wx.openOfficialAccountArticlewx.openOfficialAccountArticle是微信小程序通过小程序打开任意公众号文章api,不包括临时链接等异常状态下的公众号文章,必须有点击行为才能调用成功。
暂无评论,抢个沙发...