程序员经验分享-hwhale

微信小程序：css弹出菜单+多语言切换功能

2023-11-17

如何用css写出弹出菜单效果以及它的使用

1、核心知识点

（1）弹出菜单：animation动画，transform属性
（2）语言切换功能：点击事件函数catchtap、自定义属性data-*

2、实现效果

语言切换功能效果展示

3、注意点分解

在这里插入图片描述
在这里插入图片描述

4、代码源码

<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、写在最后

以上是自己在做项目中的一些练习~，如果觉得有用，记得点赞+关注+收藏鸭，我们一起在前端的道路上，加油努力鸭！
菜单动画效果借鉴链接：https://blog.csdn.net/qq_48085286/article/details/122400611

发行 -> 微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能
发行 -> 微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能 发行 -> 微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能 发行 -> 微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能 发行 -> 微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能 发行 -> 微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能 发行 -> 微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能 发行 -> 微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能 发行 -> 微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能 发行 -> 微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能 发行 -> 微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能 发行 -> 微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能微信小程序：css弹出菜单+多语言切换功能

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序

css

前端

微信小程序：css弹出菜单+多语言切换功能 的相关文章

随机推荐

  • 最适合 IoT标准化的许可证是哪一个？

    本文翻译至 http readwrite jp infrastructure 32485 IoT 是今年的技术趋势之一 该领域的潜力是相当大的 但是 关于 规格 依然是四分五裂缺乏统一感 最近可以看到世界已经迈出了标准化的一大歩 到现在为止

  • CocosCreator实战篇 ｜CocosCreator实现《飞机大战》

    博客主页 肩匣与橘 欢迎点赞 收藏 留言 如有错误敬请指正 本文由肩匣与橘编写 首发于CSDN 生活依旧是美好而又温柔的 你也是 飞机大战 前言 一 素材准备 二 场景搭建 背景 主角战斗机 敌方战机生成点 分数UI 副摄像机 三 脚本编写

  • 空余时间在家做短视频剪辑，一部手机就能搞定，0基础新手也能做

    新手小白刚进去短视频自媒体领域 0粉丝想赚钱就要选一个发布内容有播放量就有收益平台去操作 刚开始可能收益不高 但你坚持做下去 就会跟半途放弃的人不一样 今天大周就说一说具体步骤 该怎么去做 一 选择平台 选择一个有播放量就有收益的平台 今天

  • 【⑬MySQL

    前言 欢迎来到小K的MySQL专栏 本节将为大家带来MySQL数据类型简介 整数 浮点 定点 时间 日期类型的分享 目录 前言 0 数据类型简介 1 整数类型 2 浮点类型 3 定点类型 4 日期 时间类型 总结 0 数据类型简介 数据类型

  • 数论函数（一）

    转载请标明出处 目录 转载请标明出处 1 前言 2 数论函数介绍 2 1加性函数 2 1 1加性函数的性质 2 1 2一些加性函数的例子 2 2积性函数 2 2 1积性函数的性质 2 1 2一些积性函数的例子 2 3数论函数的重要操作 2

  • 原码、反码、补码的运算及在计算机中的作用

    一 概念简述 机器码 一个数在计算机中的二进制形式 机器码是带符号的 在计算机用机器码的最高位存放符号 正数为0 负数为1 如 0000 0011 和 1000 0011 机器码的真值 机器码除符号位剩下的真正数值 如 0000 0001的

  • python如何模拟键盘输入_python模拟鼠标点击和键盘输入的操作

    所有代码都是网上百度出来的 通过个人实践找到适合自己的 采用的python 库是 pymouse pykeyboard 安装时直接pip安装的 pip install PyUserInput 实现了一个最简单的输入密码 enter进入的登录

  • 四分位数与pandas中的quantile函数

    四分位数与pandas中的quantile函数 1 分位数概念 统计学上的有分位数这个概念 一般用p来表示 原则上p是可以取0到1之间的任意值的 但是有一个四分位数是p分位数中较为有名的 所谓四分位数 即把数值由小到大排列并分成四等份 处于

  • Streamlit 讲解专栏（十一）：数据可视化-图表绘制详解（中）

    文章目录 1 前言 2 绘制交互式散点图 3 定制图表主题 4 增强数据可视化的交互性与注释 步骤1 步骤二 5 结语 1 前言 在上一篇博文 Streamlit 讲解专栏 十 数据可视化 图表绘制详解 上 中 我们学习了一些关于数据可视化

  • AI绘画是艺术还是技术？AI绘画会让插画师集体失业？

    今年以来 AI绘画的讨论热潮此起彼伏 过一段时间就会引起争议和恐慌 就在近日 日本推出一款名为mimic的AI绘画软件 被日本绘画圈集体声讨 许多画师公开禁止AI绘画 恰巧最近美国艺术圈里关于AI绘画也发生了一件大事 一副 数字绘画 作品获

  • day2 poc与exp学习之pikachu字符注入

    exp编写 这里以基于联合注入的exp为例子 1 全局变量 对数据存储以及http包头的自定义 url http 192 168 110 131 pikachu master vul sqli sqli str php 要验证注入点的url

  • IBM《智慧数据中心》

    部分内容摘要 IBM认为 数据中心的发展路径是从成本中心演变成为服务中心 其功能也从支撑业务发展到驱动业务 并进一步成为业务创新的加速器 未来数据中心将是智慧的 绿色的 灵活支撑业务发展的 实现监控可视化 控制自动化 管理流程化 信息系统从

  • 第十四届蓝桥杯大赛软件赛省赛C/C++ 大学 B 组

    目录 试题 A 日期统计 本题总分 5 分 试题 B 01 串的熵 本题总分 5 分 试题 C 冶炼金属 本题总分 10 分 试题 D 飞机降落 本题总分 10 分 试题 E 接龙数列 本题总分 15 分 试题 F 岛屿个数 本题总分 15

  • node.js express 文件服务器,如何用nodejs+express搭建一个简单的后台服务器？

    Express框架 根据官方的介绍 Express是一个基于Node js平台 快速 开放 极简的Web开发框架 安装 Express是一个基于Node js的平台 所以在安装Express之前 你得先确保你已经安装了Node js 打开命

  • 计算1到10的阶乘之和：1！+2！+3！+......+10!(C语言&&Python)

    计算1到10的阶乘之和 1 2 3 10 C语言 include

  • Java 文件上传 三种方式

    一 配置springBoot上传文件限制 spring servlet multipart max file size 100MB 单个文件大小 max request size 1024MB 总文件大小 二 代码 import org s

  • 【LVGL 学习】样式（style）过渡动画学习

    transition 过渡动画 当一个控件的状态发生改变时 可以让样式也发生变化以提醒用户 通过过渡动画 transition 可以让样式的改变更自然 例如 按钮在点击时 以及开关在切换时 都具有一小段的过渡动画 过渡动画使用 lv sty

  • Vue手动控制点击事件Click触发

    方法一 变量的值 触发函数 方法二 利用变量控制css样式设置其pointer event none

  • Dynamics 365 for Sales: Email Engagement

    今天我们来看看和电子邮件相关的新功能 Email Engagement 这个功能是用来跟踪电子邮件的反馈状态 非常适合做邮件营销的公司 在做邮件营销的时候 我们会对发出去的邮件进行反馈统计 例如 多少邮件被查看了 有多少邮件被回复了 有多少

  • 微信小程序：css弹出菜单+多语言切换功能

    如何用css写出弹出菜单效果以及它的使用 1 核心知识点 2 实现效果 3 注意点分解 4 代码源码 5 写在最后 1 核心知识点 1 弹出菜单 animation动画 transform属性 2 语言切换功能 点击事件函数catchtap

热门标签