[uniapp] Anpassen von Schubladen und Popup-Fenstern

1. Schublade

Als ich zuvor die H5-Seite geschrieben habe, musste ich das mobile Endgerät anpassen, um das Erscheinungsbild der Website nachzuahmen. Die obere Navigationsleiste auf dem mobilen Endgerät musste in einen Hamburger-Button geändert werden. Klicken Sie auf den Hamburger-Button, um die Seitenleiste anzuzeigen. Ich habe Uni-Schublade verwendet, aber als ich zweimal auf den Inhalt geklickt habe, habe ich festgestellt, dass die Schublade nicht geschlossen werden konnte, und ich habe den Grund nie gefunden.Später habe ich selbst eine einfache Schublade geschrieben.

Hinweis: Klicken Sie auf die Maskenebene, um die Schublade zu schließen

Komponenten/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>

Da der Uni-List-Stil auf der Seite ungültig ist, ändere ich ihn in 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>

Zwei, Popup-Fenster

Hinweis: Klicken Sie auf die Maskenebene, um das Popup-Fenster zu schließen, oder klicken Sie auf die Schaltfläche „Schließen“, um die Maskenebene zu schließen

<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>