Subprograma WeChat: menú emergente css + función de cambio de varios idiomas

1. Puntos básicos de conocimiento

(1) Menú emergente: animación de animación , atributo de transformación
(2) Función de cambio de idioma: haga clic en la función de evento catchtap , datos de atributos personalizados- *

2. Darse cuenta del efecto

3. Presta atención a la descomposición

4. Codificar código fuente

<view class="container" id="index">
  
    <view class="content-text" style="margin-top: { 
        { 
        navBtnTop + 38}}px;">
        <text>{
   
   {poster[isType-1].content.name}}</text>
        <text>{
   
   {poster[isType-1].content.des}}</text>
    </view>
    <view class="model-bg" wx:if="{
     
     {isBtnShow}}" catchtap="btnPop"></view>
    <view class="change-language">
        <view class="lang-box">

            <text class="lang-btn" catchtap="btnPop">语言\n切换</text>

            <block wx:if="{
     
     {!isFirstShow}}">
                <view class="box-text {
     
     {isBtnShow ? 'a1':'a10'}}" data-id="1" catchtap="changeLanguage">
                    <text class="lang-text">中文</text>
                </view>
                <view class="box-text {
     
     {isBtnShow ? 'a2':'a20'}}" data-id="2" catchtap="changeLanguage">
                    <text class="lang-text">英文</text>
                </view>
                <view class="box-text {
     
     {isBtnShow ? 'a3':'a30'}}" data-id="3" catchtap="changeLanguage">
                    <text class="lang-text">日语</text>
                </view>
                <view class="box-text {
     
     {isBtnShow ? 'a4':'a40'}}" data-id="4" catchtap="changeLanguage">
                    <text class="lang-text">韩语</text>
                </view>
                <view class="box-text {
     
     {isBtnShow ? 'a5':'a50'}}" data-id="5" catchtap="changeLanguage">
                    <text class="lang-text">德语</text>
                </view>
            </block>

        </view>
    </view>
</view>

.container {
    
    
    position: relative;
    width: 100vw;
    height: auto;
}

text {
    
    
    display: block;
}

/* 模态框 */
.model-bg {
    
    
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 999;
}

/* 内容区 */
.content-text {
    
    
    position: relative;
    padding: 20rpx 0;
    text-align: center;
}

/* 按钮菜单 */
.change-language {
    
    
    position: fixed;
    top: 50%;
    right: 20rpx;
    transform: translateY(-50%);
    z-index: 9999;
}

.lang-box {
    
    
    position: relative;
    top: 0;
    right: 0;
}

.lang-btn {
    
    
    position: absolute;
    top: 0;
    right: 0;
    width: 60rpx;
    height: 60rpx;
    color: #fff;
    font-size: 22rpx;
    text-align: center;
    padding: 10rpx;
    border-radius: 15%;
    background-color: #CC463D;
    z-index: 99;
}

.box-text {
    
    
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

.lang-text {
    
    
    width: 60rpx;
    height: 30rpx;
    color: #fff;
    font-size: 20rpx;
    text-align: center;
    padding: 10rpx;
    border-radius: 8%;
    background-color: #CC463D;
}

/* 菜单动画 */
.a1 {
    
    
    animation: a1 500ms ease-out forwards;
}

@keyframes a1 {
    
    
    0% {
    
    
        transform: translate(0, 0) rotateZ(0deg);
        opacity: 0;
    }

    100% {
    
    
        transform: translate(-15px, -75px) rotateZ(360deg);
        opacity: 1;
    }
}

.a10 {
    
    
    animation: a10 500ms ease-out forwards;
}

@keyframes a10 {
    
    
    0% {
    
    
        transform: translate(-15px, -75px) rotateZ(360deg);
        opacity: 1;
    }

    100% {
    
    
        transform: translate(0, 0) rotateZ(0deg);
        opacity: 0;
    }
}

.a2 {
    
    
    animation: a2 500ms ease-out forwards;
}

@keyframes a2 {
    
    
    0% {
    
    
        transform: translate(0, 0) rotateZ(0deg);
        opacity: 0;
    }

    100% {
    
    
        transform: translate(-65px, -35px) rotateZ(360deg);
        opacity: 1;
    }
}

.a20 {
    
    
    animation: a20 500ms ease-out forwards;
}

@keyframes a20 {
    
    
    0% {
    
    
        transform: translate(-65px, -35px) rotateZ(360deg);
        opacity: 1;
    }

    100% {
    
    
        transform: translate(0, 0) rotateZ(0deg);
        opacity: 0;
    }
}


.a3 {
    
    
    animation: a3 500ms ease-out forwards;
}

@keyframes a3 {
    
    
    0% {
    
    
        transform: translate(0, 0) rotateZ(0deg);
        opacity: 0;
    }

    100% {
    
    
        transform: translate(-95px, 10px) rotateZ(360deg);
        opacity: 1;
    }
}

.a30 {
    
    
    animation: a30 500ms ease-out forwards;
}

@keyframes a30 {
    
    
    0% {
    
    
        transform: translate(-95px, 10px) rotateZ(360deg);
        opacity: 1;
    }

    100% {
    
    
        transform: translate(0, 0) rotateZ(0deg);
        opacity: 0;
    }

}

.a4 {
    
    
    animation: a4 500ms ease-out forwards;
}

@keyframes a4 {
    
    
    0% {
    
    
        transform: translate(0, 0) rotateZ(0deg);
        opacity: 0;
    }

    100% {
    
    
        transform: translate(-65px, 55px) rotateZ(360deg);
        opacity: 1;
    }
}

.a40 {
    
    
    animation: a40 500ms ease-out forwards;
}

@keyframes a40 {
    
    
    0% {
    
    
        transform: translate(-65px, 55px) rotateZ(360deg);
        opacity: 1;
    }

    100% {
    
    
        transform: translate(0, 0) rotateZ(0deg);
        opacity: 0;
    }

}

.a5 {
    
    
    animation: a5 500ms ease-out forwards;
}

@keyframes a5 {
    
    
    0% {
    
    
        transform: translate(0, 0) rotateZ(0deg);
        opacity: 0;
    }

    100% {
    
    
        transform: translate(-15px, 90px) rotateZ(360deg);
        opacity: 1;
    }
}

.a50 {
    
    
    animation: a50 500ms ease-out forwards;
}

@keyframes a50 {
    
    
    0% {
    
    
        transform: translate(-15px, 90px) rotateZ(360deg);
        opacity: 1;
    }

    100% {
    
    
        transform: translate(0, 0) rotateZ(0deg);
        opacity: 0;
    }

}

Page({
    
    
    /**
     * 页面的初始数据
     */
    data: {
    
    
        poster: [
            {
    
    
                type: 1,
                lang: '中文',
                content: {
    
    
                    name: '糖葫芦呀',
                    des: '你好呀，哈哈哈哈，我是糖葫芦'
                }
            },
            {
    
    
                type: 2,
                lang: '英文',
                content: {
    
    
                    name: 'Tomatoes on sticks',
                    des: 'Hello, ha, I am Tomatoes on sticks.'
                }
            },
            {
    
    
                type: 3,
                lang: '日语',
                content: {
    
    
                    name: '砂糖ひょうたんか',
                    des: 'どうも、はは、私は糖ひょうたんです'
                }
            },
            {
    
    
                type: 4,
                lang: '韩语',
                content: {
    
    
                    name: '탕후루야',
                    des: '안녕하세요. 하하하하. 저는 설탕박이에요.'
                }
            },
            {
    
    
                type: 5,
                lang: '德语',
                content: {
    
    
                    name: 'Tomaten auf Stäbchen',
                    des: 'Hallo, ha, ich bin "Tomaten auf den Stöcken".'
                }
            }
        ],
        isType: 1, //当前语言类型
        isFirstShow: true, //是否第一次进入（这个是为了阻止第一次进入页面菜单执行往回收的动画）
        isBtnShow: null, //是否已经弹出
    },

    onLoad: function (options) {
    
    
        app.onNavLoading();
        console.log('我是你当前选择的语言类型', this.data.isType)
    },

    //打开切换菜单
    btnPop() {
    
    
        this.setData({
    
    
            isFirstShow: false,
            isBtnShow: !this.data.isBtnShow
        })
    },

    //点击切换语言
    changeLanguage(e){
    
    
        console.log(e.currentTarget.dataset.id);
        var num = e.currentTarget.dataset.id;
        this.setData({
    
    
            isType: num
        })
        this.btnPop();
    }
})

5. Escribe al final

Los anteriores son algunos ejercicios en mi proyecto ~, si lo encuentra útil, recuerde dar me gusta + seguir + marcar, ¡trabajemos duro juntos en el camino frontal!
Enlace de referencia del efecto de animación del menú: https://blog.csdn.net/qq_48085286/article/details/122400611

Publicar -> WeChat Mini Programa: menú emergente css + función de cambio de varios idiomas WeChat Mini Programa: menú emergente css + función de cambio de varios idiomas WeChat Mini Programa: menú emergente css + función de cambio de varios idiomas
Publicar función de cambio de varios idiomas Subprograma WeChat: menú emergente css + función de cambio de varios idiomas Subprograma WeChat: menú emergente css + función de cambio de varios idiomas Lanzamiento función de cambio de varios idiomas subprograma WeChat: menú emergente css + función de cambio de varios idiomas Liberar -> subprograma WeChat: menú emergente css + función de cambio de varios idiomas WeChat applet: menú emergente css + función de cambio de varios idiomas WeChat applet: menú emergente css + liberación de -> WeChat applet: menú emergente css + cambio de varios idiomas subprograma de función WeChat: menú emergente css + función de cambio en varios idiomas Subprograma de WeChat: menú emergente css + liberación de función de cambio en varios idiomas -> Programa del subprograma WeChat: menú emergente css + función de cambio en varios idiomas Subprograma Wechat: menú emergente css + función de cambio de varios idiomas Programa pequeño: menú emergente de css + función de cambio de varios idiomas Programa pequeño de WeChat: menú emergente de css + función de cambio de varios idiomas Lanzamiento -> Programa pequeño de WeChat: ventana emergente de css Menú arriba + función de cambio de varios idiomas WeChat Small Program: menú emergente CSS + función de cambio de varios idiomas WeChat Mini Program: menú emergente CSS + función de cambio de varios idiomas Release -> WeChat Mini Program: menú emergente CSS + función de cambio de varios idiomas WeChat Mini Program: menú emergente css + función de cambio de varios idiomas WeChat Mini Program: menú emergente css + función de cambio de varios idiomas Distribución de funciones -> subprograma WeChat: menú emergente css + multi -Función de cambio de idioma Subprograma WeChat: menú emergente css + función de cambio de varios idiomas Subprograma WeChat: menú emergente css + función de cambio de varios idiomasPublicar -> WeChat Mini Programa: menú emergente css + función de cambio de varios idiomas WeChat Mini Programa: menú emergente css + función de cambio de varios idiomas WeChat Mini Programa: menú emergente css + función de cambio de varios idiomas Publicar función de cambio de varios idiomas WeChat applet: menú emergente css + función de cambio de varios idiomas Applet WeChat: menú emergente css + función de cambio de varios idiomas