h5 手风琴效果_小程序-实现折叠面板-手风琴效果

背景

无论是在小程序还是 h5 网页,折叠菜单,手风琴是一个非常常见的效果,如今也有很多现成的 UI 组件库已经实现了这一效果的,但有时候在写原生小程序时,单单就是一个折叠菜单效果,却要引入整个 UI 库,有点得不偿失

以下就自己手动实现一个的

实例效果

785b0ca858dbd2508fe6ac585121e511.gif

具体实现

如下是wxml示例代码

<view class="content"><block wx:for="{{ listDatas }}" wx:key="index"><view class="list-content" bindtap="onListClick" data-index="{{ index }}"><view><text>{{ item.list_name }}</text></view><view><iconfontclass="iconfont {{selected[index] ? 'icon-arrow-down' : 'icon-right'}}"></iconfont></view></view><view class="list-text {{selected[index] ? '' : 'hidden-content'}}"><view><text selectable="true">{{ item.list_content }}</text></view></view></block>
</view>

如下是wxss示例代码

.content {padding: 15rpx 15rpx 0 15rpx;font-size: 30rpx;color: #808080;
}.list-content {display: flex;justify-content: space-between;text-align: center;line-height: 60rpx;border-bottom: 1rpx solid #ddd;
}.list-text {padding-top: 15rpx;transition: all 0.5s ease;text-indent: 40rpx;display: block;
}.hidden-content {// 主要利用的是display:none实现隐藏display: none;
}

如下是折叠菜单逻辑代码

Page({/*** 页面的初始数据*/data: {selected: [false, false, false, false, false], // // 这里表示列表项是否展开,默认初始时此数组的元素全为fasle,表示都没展开active: null, // 当前展开的项的index值listDatas: [{list_name: '简介',list_content:'一个靠前排的90后帅小伙,具有情怀的技匠,路上正追逐斜杠青年的践行者',},{list_name: '开发者',list_content: '随笔川迹',},{list_name: '微信ID',list_content: 'suibichuanji',},{list_name: '微信公众号',list_content: 'itclanCoder',},{list_name: '其他业务',list_content:'广告文案策划编写/短视频制作(特效,后期视频处理)/配音/公众号代运营',},],},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},// 点击列表,收缩与展示onListClick(event) {let index = event.currentTarget.dataset.index;let active = this.data.active;this.setData({[`selected[${index}]`]: !this.data.selected[`${index}`],active: index,});// 如果点击的不是当前展开的项,则关闭当前展开的项// 这里就实现了点击一项,隐藏另一项if (active !== null && active !== index) {this.setData({[`selected[${active}]`]: false,});}},
});

如上代码就可以实现手风琴的效果,主要利用的是css中的display:none,默认的一些子选项是隐藏的,然后列表的数据的名称以及要展示的内容放在一个数组listDatas中,随后,循环列表渲染

在列表中绑定点击事件,在元素上设置data属性,在事件对象中就可以获取到,最终通过setData修改数据,以达到实现手风琴的效果

结语

实现这个手风琴,主要还是在怎么控制子选项的一个状态selected,通过列表的索引,然后进行控制selected的状态,实现子项列表内容的显示和隐藏

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

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

相关文章

oracle数据库连接 ORA-12638:身份证明检索失败

连数据库的时候突然报了一个这个 查找各种办法&#xff0c;发现自己从10g换成了11g&#xff0c;不过这个没有什么关系&#xff0c;跟oracle的安全设置有关系&#xff0c; 首先从开始菜单找到Net Manager 打开&#xff0c;选择本地&#xff0c;概要文件&#xff0c;下拉列表中选…

IntelliJ IDEA 2021.1更新了好多实用功能介绍

目录 1、WSL 2的支持 2、内置的HTML预览器 3、搜索范围的增强 4、增强的Pull Request支持 5、拆分窗口优化 6、JAVA 16的支持 7、更智能的数据检查 IntelliJ IDEA 2021.1 正式版发布了&#xff0c;这个版本最大的更新内容&#xff0c;就是支持WSL 2和JAVA 16了。而且除了支持WS…

生产三码 黑苹果_黑苹果OC配置工具:OpenCore Configurator v2.15.2.0

一、版本软件版本&#xff1a;OpenCore Configurator 5.15.0.1更新日期&#xff1a;2020年10月14日系统版本&#xff1a;macOS 10.12 Sierra及以上二、OpenCore简介OpenCore是非常优秀的开源软件&#xff0c;旨在通过提供更加通用和模块化的系统来解决Clover带来的限制和问题&a…

电脑硬件常见故障维修技巧

电脑已经成为我们学习日常生活娱乐必不可少的设备了&#xff0c;时间久了难免会遇到小故障&#xff0c;今天我们一起来看下遇到常见的电脑硬件方面的小故障&#xff0c;我们应该如何去自己检测和维修吧。 电脑检测故障我们还是要从电脑的几大硬件开始检查起。 1、CPU 打开机箱查…

gdb查看空指针 linux_5 个鲜为人知 GNU 调试器(GDB)技巧

了解如何使用 gdb 的一些鲜为人知的功能来检查和修复代码。-- Tim Waugh(作者)GNU 调试器 (gdb)是一种宝贵的工具&#xff0c;可用于在开发程序时检查正在运行的进程并解决问题。你可以在特定位置(按函数名称、行号等)设置断点、启用和禁用这些断点、显示和更改变量值&#xff…

盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小

前言 今天来给大家盘点三个JavaScript案例&#xff0c;分别是实现限时秒杀、定时跳转、改变盒子大小案例&#xff0c;一起来看看吧&#xff01; 一、实现限时秒杀案例 1.在淘宝网中&#xff0c;商家为了促销经常搞一些活动&#xff0c;例如限时秒杀是常见的一种活动&#xff0c…

华为的鸿蒙系统是海思_死心了!华为鸿蒙系统首款终端确认,不是手机

欢迎点击上面ZAKER关注5 月底谷歌宣布断供华为。随后&#xff0c;华为 " 秘密 " 研发 7 年的自主产权操作系统鸿蒙被公之于众。随着关于鸿蒙系统的消息越来越多&#xff0c;如鸿蒙系统 2012 年便开始规划、鸿蒙系统在多个国家注册商标等。人们除了佩服华为的未雨绸缪…

网络知识:宽带下载网速是30MB/s,经过路由器后仅10MB/s,看完你就懂了

问题&#xff1a;宽带下载网速本是30MB/s&#xff0c;经过路由器后速度仅10MB/s&#xff0c;这是为什么&#xff1f; 宽带下载测速可以到30MB/s&#xff0c;说明外线和光猫还有电脑是没有问题的。目前家庭的组网基本都是光纤入户了&#xff0c;你的测速瓶颈既然不在光猫&#…

手机投屏到电脑的5种方式,你学到了吗

今天小编给大家分享5种手机投屏到电脑的方式&#xff0c;希望对大家能有帮助&#xff01; 方法一&#xff1a; 1、我们可以通过Win10自带的投影功能&#xff0c;将我们的手机和电脑连接同一个无线网络。 2、接下来我们就在电脑开始菜单栏里找到设置选项打开。 3、我们进入之后找…

poj 3728 Catch That Cow ([kuangbin带你飞]专题一 简单搜索)

题目大意&#xff1a;题目链接 就是给你N&#xff0c;K&#xff0c;每次有三种惭怍1&#xff0c;-1&#xff0c;*2&#xff0c;&#xff0c;问多少次操作能到K 解题思路&#xff0c;搜索直接算&#xff0c;。&#xff0c;&#xff0c;&#xff0c;哎&#xff0c;啥时候这种垃圾…

不拦截指定路径_控制层访问拦截

在控制层进行访问拦截也是我们在项目中常会遇到的需求,例如:项目中要求系统登录操作有时间限制--12306购票时间的限制等.对于这类需求我们一般有几种选择:过滤器FilterAOPSpringMVC拦截器...本文我们主要说一下SpringMVC拦截器的实现原理Spring MVC的拦截器是基于回调机制,可以…

电脑知识:Win10系统把系统盘的软件移到D盘的简单方法

❤️作者主页&#xff1a;IT技术分享社区 ❤️作者简介&#xff1a;大家好,我是IT技术分享社区的博主&#xff0c;从事C#、Java开发九年&#xff0c;对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉&#xff1a; 数据库领域优质创作者&#x1f3c6;&#x…

RuntimeException和Exception区别

Exception &#xff1a;受检查的异常&#xff0c;这种异常是强制我们catch或throw的异常。你遇到这种异常必须进行catch或throw&#xff0c;如果不处理&#xff0c;编译器会报错。比如&#xff1a;IOException。 RuntimeException&#xff1a;运行时异常&#xff0c;这种异常我…

语言高精度算法阶乘_JavaScript中的算法(附10道面试常见算法题解决方法和思路)...

https://juejin.im/post/6844903811505455118Introduction面试过程通常从最初的电话面试开始&#xff0c;然后是现场面试&#xff0c;检查编程技能和文化契合度。几乎毫无例外&#xff0c;最终的决定因素是还是编码能力。通常上&#xff0c;不仅仅要求能得到正确的答案&#xf…

硬件:LCD和LED相关知识介绍

目录 一、LCD简介 二、LED简介 三、LED和 LCD的区别 四、LED和 LCD显示器的区别 一、LCD简介 LCD是液晶显示屏(Liquid Crystal)Display的全称&#xff0c;主要有TFT、UFB、TFD、STN等几种类型的液晶显示屏无法定位程序输入点于动态链接库上。 笔记本液晶屏最常用的是TFT。 TFT…

Swagger+AutoRest 生成web api客户端(.Net)

简介 对于.net来说&#xff0c;用web api来构建服务是一个不错的选择&#xff0c;都是http请求&#xff0c;调用简单&#xff0c;但是如果真的要在程序中调用&#xff0c;则还有些工作要做&#xff0c;比如我们需要手写httpClient调用&#xff0c;并映射Model&#xff0c; 如果…

电脑技巧:六款Mac电脑上值得推荐的看图软件

❤️作者主页&#xff1a;IT技术分享社区 ❤️作者简介&#xff1a;大家好,我是IT技术分享社区的博主&#xff0c;从事C#、Java开发九年&#xff0c;对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉&#xff1a; 数据库领域优质创作者&#x1f3c6;&#x…