uni-app组件uni-drawer 小案例（不遮挡小程序自定义导航栏）

最新推荐文章于 2024-07-19 16:08:26 发布

pollotui

最新推荐文章于 2024-07-19 16:08:26 发布

阅读量988

点赞数 1

文章标签： uni-app 小程序

本文链接：https://blog.csdn.net/pollotui/article/details/131661169

版权

效果展示：

直接上代码：

<template>
    <view>
        <unidrawer ref="draw" :mask="mask" :width="drawWid" :mode='mode' >
            <view style="padding:30rpx;">
                <view class="uni-title">抽屉式导航</view>
            </view>
            <button type="warn" @tap="hide()" style="margin-top: 100rpx;">关闭</button>
        </unidrawer>
        <button type="primary" @tap="show()">显示</button>
    </view>
</template>
<script>
    import unidrawer from "@/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue"
	const res = wx.getSystemInfoSync();
	const statusHeight = res.statusBarHeight; //状态栏高度
	const cusnavbarheight = (statusHeight + 44) + "px";
    export default {
        components: {unidrawer},
        data() {
            return {
                mask: true,
                left:'left',
                drawWid:'50%',//需要把uni-drawer组件里的参数width的type改为String，我这里是第63 64行
                maskClick:true,
                mode:'left'
            };
        },
        methods: {
            //显示抽屉
            show(){
                this.$refs.draw.open();
            },
            hide(){
                this.$refs.draw.close();
            }
        }
    }
</script>

<style scoped lang="scss">
  ::v-deep .uni-drawer {
    margin-top: v-bind(cusnavbarheight)
  }
</style>