uniapp实现支付宝菜单展开与收起

需求实现支付宝类似的效果:

 思路:

        1.首先建立展开收起按钮,这里使用的是uview里面的icon图标。

        2.其次建立展开菜单内容,这里只演示了文本信息,后期引入首页应用。

        3.最后写js逻辑,展开收起时改变盒子高度和icon。

代码:

1.视图层

<view class="header-application"><view class="rowOperate"><view class="left"><text class="left-text">首页应用</text><u-icon :name="isMenuShow?'arrow-up':'arrow-down'" color="#c6c6c6" size="15" :bold='true'@click="handleShow"></u-icon></view><view class="right"><u-button type="primary" color="#027AFF" size="mini" :text="operateText"></u-button></view></view><!-- 首页菜单应用 --><view class="show-more" v-if="isMenuShow" :class="[isMenuShow ? 'showMenusBox' : '']"><view>第1行文字</view><view>第2行文字</view><view>第3行文字</view><view>第4行文字</view><view>第5行文字</view></view></view>// 展开菜单.showMenusBox {height: 300px;margin: 15rpx 32rpx;}

2.逻辑层


handleShow() {this.isMenuShow = !this.isMenuShow;}

这样就大功告成了!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/55882.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Harbor部署--使用 Harbor 安装包

一、Harbor安装准备条件 这里以 harbor 2.8.3 版本为例 1.1 硬件要求 Harbor 安装对硬件资源CPU、内存和硬盘的要求如下表&#xff1a; 资源 最小要求 推荐配置 CPU 2 CPU 4 CPU Mem 4 GB 8 GB Disk 40 GB 160 GB 使用如下命令分别查看服务器的物理CPU和逻辑CPU个数…

任务12、Quality指令加持,Midjourney生成电影级数码作品

12.1 任务概述 本次实验任务旨在帮助你掌握Midjourney AI绘画中的Quality指令。通过深入介绍Quality指令的概念和作用,我们将解释为什么它在绘画中至关重要。通过测试不同的Quality参数对绘画效果的影响,并提供实战演示,你将学会如何在Midjourney中设置Quality参数以达到更…

【JavaEE进阶】Spring核心与设计思想

文章目录 一. Spring框架概述1. 什么是Spring框架2. 为什么要学习框架?3. Spring框架学习的难点 二. Spring 核心与设计思想1. 什么是容器?2. 什么是IoC?3. Spring是IoC容器4. DI&#xff08;依赖注入&#xff09;5. DL&#xff08;依赖查找&#xff09; 一. Spring框架概述…

git删除已经提交到本地仓库的代码

使用场景如下&#xff1a;在开发工程中第一版编写了一个功能&#xff0c;可在版本迭代的过程中该功能被舍去了&#xff0c;这就意味着该功能的核心代码都要删除&#xff0c;可以该部分代码早已提交到本地仓库了&#xff0c;那么该如何删除本地仓库记录的代码呢? 首先很多人都…

import有什么用,python中怎么使用import

目录 引言 import的概念 import的作用 import的应用 Python中如何使用import import报错处理 代码示例 注意事项 总结 引言 在Python编程语言中&#xff0c;import是一个关键字&#xff0c;用于将其他模块或库的功能引入当前代码中。import的概念和功能使得Python成为…

避免安装这5种软件,手机广告频繁弹窗且性能下降

在我们使用手机的日常生活中&#xff0c;选择合适的应用软件对于保持良好的使用体验至关重要。然而&#xff0c;有些软件可能会给我们带来不必要的麻烦和困扰。特别是那些频繁弹窗广告、导致手机性能下降的应用程序&#xff0c;我们应该尽量避免安装它们。 首先第一种&#xf…

聚观早报|iPhone 15预计9月22日上市;一加Open渲染图曝光

【聚观365】8月7日消息 iPhone 15预计9月22日上市一加Open渲染图曝光Redmi K60至尊版细节曝光小米14 Pro屏幕细节曝光vivo V3正式发布&#xff0c;执着自研“影像芯片” iPhone 15预计9月22日上市 上周有多位消息人士透露&#xff0c;多家合作的电信运营商已要求员工不要在9月…

编写第一个 React Native 程序

React Native 目录 使用React Native CLI命令创建的目录如下图所示&#xff1a; 重要目录说明 目录说明__tests__存放测试用例的目录.bundle / config配置文件&#xff08;一般不会用到&#xff09;android 和 IOS 文件夹这两个文件夹主要是存放安卓和 ios 相关的配置文件和…

【JAVA】正则表达式是啥?

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 文章目录 前言正则表达式正则表达式语法正则表达式的特点捕获组实例 前言 如果我们想要判断给定的字符串是否符合正则表达式的过滤逻辑&#xff08;称作“匹配”&#xff09;&#xff0c…

基于EEGLAB的ICA分析

目录 1.ICA原理 2.ICA的实现 3.ICA成分识别 4.ICLabel识别并去除伪迹 5.ICA成分识别练习 1.ICA原理 得到的每一个地形图&#xff0c;实际上就是它的权重谱。 投射&#xff1a;根据原成分恢复原始信号。 选择性投射&#xff1a;去伪。 2.ICA的实现 extended&#xff0c;1&…

网络:从socket编程的角度说明UDP和TCP的关系,http和tcp的区别

尝试从编程的角度解释各种网络协议。 UDP和TCP的关系 从Python的socket编程角度出发&#xff0c;UDP&#xff08;User Datagram Protocol&#xff09;和TCP&#xff08;Transmission Control Protocol&#xff09;是两种不同的传输协议。 TCP是一种面向连接的协议&#xff0c…

el-select 三级联动

一、效果图 二、思路&#xff1a;先请求一级select数据&#xff0c;通过选中的id请求二级数据&#xff0c;以此类推&#xff01; 三、代码 <template><div><el-card><el-form :inline"true"><el-form-item label"一级">&l…