[uniapp] 引き出しとポップアップ ウィンドウをカスタマイズする

1.引き出し

前にH5ページを書いた時、モバイル端末をサイトの見た目に合わせて改造する必要がありました.モバイル端末のトップナビゲーションバーをハンバーガーボタンに変更する必要がありました.ハンバーガーボタンをクリックするとサイドバーが表示されます. uni-drawerを使っていたのですが、中身を2回クリックするとドロワーが閉まらず、原因が分からず、あとで簡単なドロワーを自作しました。

注：マスクレイヤーをクリックしてドロワーを閉じます

コンポーネント/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>