【uniapp】自定义抽屉和弹窗

一、抽屉

我之前写H5页面的时候，需要适配手机端，仿造网站的样子，手机端的顶部导航栏需要改成汉堡键，点击汉堡键，出现侧边栏。我就使用了uni-drawer，但是当我点击两次内容之后，发现关闭不了抽屉，一直也没找到原因，后来我就自己写了一个简单的抽屉。

注意：点击遮罩层可以关闭抽屉

components/Top.vue

<template>
    <view class="TopContainer">
        <!-- 汉堡键 -->
        <image class="img" src="@/static/hb.png" @click="showDrawer('showLeft')"></image>
        <!-- 打开内容 -->
        <view class="Drawer" v-show="drawer" @click="closeDrawer($event)">
            <view class="b">
                <uni-list v-for="(item,index) in list" :key="item.id">
                    <uni-list-item clickable :title="item.name" @click="changeAct(item)" />
                </uni-list>
                <uni-list class="black">
                    <uni-list-item clickable title="联系我们" @click="con()" />
                    <uni-list-item clickable title="退出登录" @click="layout()" />
                </uni-list>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 默认激活样式是第一个
                list: [{
                        id: 1,
                        name: '首页'
                    },
                    {
                        id: 2,
                        name: '资料下载'
                    }
                ],
                drawer: false,
            }
        },
        methods: {
            // 实现点击弹窗内容自身阻止冒泡，以防弹窗被关闭
            stopClose(e) { },
            // 打开窗口
            showDrawer(e) {
                this.drawer = !this.drawer
            },
            // 关闭窗口
            closeDrawer(e) {
                this.drawer = false 
            },
            changeAct(item) {
                switch (item.id) {
                    case 1:
                        uni.navigateTo({
                            url: '/pages/H5/index/index'
                        })
                        break;
                    case 2:
                        uni.navigateTo({
                            url: '/pages/H5/word/index'
                        })
                        break;
                }
            },
            con() {
                this.closeDrawer()
                uni.showModal({
                    title: this.$t('pages.phone'),
                    content: '4009880',
                    showCancel: false,
                })
            },
            layout() {
                this.closeDrawer()
                uni.showModal({
                    title: this.$t('pages.out'),
                    cancelText: this.$t('pages.cancel'),
                    confirmText: this.$t('pages.confirm'),
                    success: (res) => {
                        if (res.confirm) {
                            uni.clearStorageSync()
                            uni.reLaunch({
                                url: '/pages/H5/login/index'
                            })
                            uni.showToast({
                                title: 'Log out successfully',
                                icon: 'success',
                            })
                        } else if (res.cancel) {
                            uni.showToast({
                                title: 'Login canceled',
                                icon: 'success',
                            })
                        }
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .screen1 {
        display: block;
    }

    .screen {
        display: none;
    }

    @media screen and (min-width:1024px) {

        .screen1 {
            display: none;
        }

        .screen {
            display: block;
        }
    }

    .Drawer {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.3);
        transform: translateX(0);

        .b {
            font-size: 20rpx;
            display: block;
            width: 320rpx;
            height: 100vh;
            background-color: #fff;
        }
    }

    .uni-list-item__container {
        position: relative;
        display: flex;
        flex-direction: row;
        padding: 6px 15px;
        padding-left: 15px;
        flex: 1;
        overflow: hidden;
    }
</style>

由于uni-list样式在页面内修改无效，所以我在App.vue中进行修改

<style lang="scss">
    // 设置整个项目的背景色
    page {
        background-color: #f5f5f5;
    }

    /* 去除scrollview滚动条 不支持nvue页面 */
    ::-webkit-scrollbar {
        display: none;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        background: transparent;
    }

    // H5页面顶部
    .TopContainer {
        @media screen and (max-width:1024px) {
            .uni-list-item__content-title {
                font-size: 14px !important;
            }
        }

        @media screen and (min-width:1024px) {
            .uni-list-item__content-title {
                font-size: 12rpx !important;
            }
        }

        .uni-list-item__container {
            line-height: 40px;
        }

        .black .uni-list-item {
            border-top: 1px solid #fff;
        }

        .black .uni-list-item__content-title {
            color: #fff;
        }

        .black .uni-list-item__container {
            background-color: #313133;
        }
    }

    // 解决边框重合的问题
    .uni-list {
        margin-top: -1px;
    }
</style>

二、弹窗

注意：点击遮罩层可以关闭弹窗，或者点击关闭按钮关闭遮罩层

<template>
    <view class="TopContainer">
        <button @click="go(item)"></button>
        <!-- 视频 -->
        <view class="popup" v-show="popup" @click="close($event)">
            <view class="appUpdateContent" @click.native.stop="stopClose($event)">
                <video autoplay controls object-fit="fill" id="myvideo" :src="word.fileurl_EN"></video>
                <button class="btn" @click="downloadMP4()">
                    <text>关闭</text>
                </button>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                word: {},//弹窗内容
                popup: false,
            }
        },
        methods: {
            close(e) {
                this.popup = false
            },
            // 实现点击弹窗内容自身阻止冒泡，以防弹窗被关闭
            stopClose(e) {},
            // 点击
            go(item) {
                    this.word = item
                    this.popup = true
            },
            downloadMP4() {
                this.popup = false
            },
        }
    }
</script>
<style lang="scss">
  .popup {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 998;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;

        .appUpdateContent {
            display: inline-block;
            width: 80%;
            text-align: center;
        }

        .btn {
            display: inline;
            background-color: #0086d6;
            color: #fff;
            padding: 10px;
        }
    }
</style>