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

最新推荐文章于 2023-07-20 20:44:02 发布

itclanCoder

最新推荐文章于 2023-07-20 20:44:02 发布

阅读量2.4k

点赞数

本文链接：https://blog.youkuaiyun.com/wzc_coder/article/details/109089057

版权

本文介绍了如何在小程序中手动实现折叠面板，即手风琴效果。通过利用小程序的特性，结合CSS和JavaScript，实现了一个简单的折叠菜单。代码示例展示了如何通过点击事件和数据绑定控制子选项的状态，以达到显示和隐藏内容的目的。文章鼓励读者留言讨论，共同学习进步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

背景

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

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

实例效果

(长按扫码,进入识开发者页面即可体验)

具体实现

如下是wxml示例代码

<view class="content">
  <block wx:for="{
   { listDatas }}" wx:key="index">
    <view class=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

itclanCoder

关注关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序---缓慢展开和收起效果（不需要wx:if控制实现）

weixin_43452154的博客

11-24

4414

通过height高度来控制展开或收起，当不需要展示时，高度为0，超过的部分用overflow: hidden;来隐藏，可以通过该方法来让需要展示的页面隐藏起来，然后显示的时候，将height条件去掉，在加上transition来控制动画即可。点击中间问题，在中间缓慢展开，将下面往下撑开，点击再次收起效果。点击添加商品，缓慢向下展开，点击收起，缓慢将下面收起效果。方法简单，只需要明白实现的原理即可实现自己喜欢的效果。原理实现是一样的，只需要将主要部分即可。

手风琴折叠菜单效果小程序

11-07

手风琴折叠菜单效果小程序，用于微信小程序。测试可用

参与评论您还未登录，请先登录后发表或查看评论

公众号文章折叠点击后展开案例_小程序-实现折叠面板-手风琴效果

weixin_39928233的博客

11-12

1815

背景无论是在小程序还是 h5 网页,折叠菜单,手风琴是一个非常常见的效果,如今也有很多现成的 UI 组件库已经实现了这一效果的,但有时候在写原生小程序时,单单就是一个折叠菜单效果,却要引入整个 UI 库,有点得不偿失以下就自己手动实现一个的实例效果具体实现如下是wxml示例代码<view class="content"> <block wx:for="{{ listDatas...

原生小程序实现手风琴

请叫我欧皇！的博客

10-18

1357

3、js文件，wxml文件的dataSoure.evn_list，和dataSoure.xx都是后台反的数据，是数组格式对象，显示也是通过wx:for循环实现，通过判断当前所点击的索引赋值给showIndex实现单条数据的显示。本文主要讲述用原生实现手风琴效果，并且默认展开第一个，点击其他的第一个折叠，其他同理，永远只会显示一条数据的展开，使用到了iconfont的图标，原生不会引入的请看。手风琴教程到此结束，希望对你有所帮助~

微信小程序实现折叠面板

一只琪琪子的博客

05-13

2128

wxml <view class='help'> <view class='help_item' wx:for="{{questList}}" wx:key="index"> <view class='title' data-index='{{index}}' catchtap='panel'> <view class='title_1'>{{item.questions}}</view> <view class=

微信小程序 之手风琴折叠面板实例

gyueh的博客

07-21

2018

目的：折叠面板默认显示其中一项，利用toggle实现元素的显示和隐藏例如：页面中有四个可折叠元素，默认元素1显示，其余项目内容隐藏；当点击元素2时，元素2显示，其余项目内容隐藏。初始效果如图： wxml部分代码如下： <view class='item' wx:for="{{items}}" wx:key="index"> <view class='title' data-index="{{index}}" bindtap='panel'> {{item.title}

jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单

10-21

在本文中，我们将专注于使用 EasyUI 创建可折叠面板（Accordion）的布局，即手风琴菜单。 手风琴菜单是一种常见的 UI 设计模式，它允许用户展开或折叠各个面板，一次只显示一个内容区域，常用于导航菜单或内容分类...

微信小程序——折叠面板

12-29

总结一下，微信小程序实现折叠面板的关键在于利用JavaScript控制状态，结合`wx:if`或`hidden`属性动态显示和隐藏内容区域，以及使用CSS样式实现动画效果。通过这种方式，我们可以创建出符合用户交互习惯、节省屏幕...

微信小程序-给列表加上手风琴效果

weixin_34405925的博客

05-26

5564

列表内容的显示和隐藏是十分常见的需求，下面我将介绍如何通过简单的CSS过渡动画来制作列表显隐的手风琴效果~ 先看效果图：关键点：要实现动画的效果，通过 display:none 控制显隐是不行的，因为这个属性造成的变化效果是瞬间的，所以这里用到的是 transition 属性来指定 heigth 高度变化的过渡效果。需要用到的示例数据 data: { selected: [false...

简单的js手风琴效果

01-31

自己写的js手风琴效果,主要是用的div,想和大家分享练中的点点滴滴

手风琴效果展示

08-01

很容易修改的手风琴效果 $(function(){ $(".voice_2 ul li").each(function(){ var fold = $(this).find(".fold"); var unfold = $(this).find(".unfold"); if(fold.is(":hidden")){ $(this).width(680); }else{ $(this).width(100); } }) $(".voice_2 ul li").click(function(){ var li_index = $(this).index(); $(this).animate({width:680},200); $(this).find(".unfold").show(); $(this).find(".fold").hide(); $(this).siblings().animate({width:100},200); $(this).siblings().find(".unfold").hide(); $(this).siblings().find(".fold").show(); }) })

微信小程序--365笔记第35天---手风琴效果

weixin_43779957的博客

06-30

795

1.实现一个手风琴效果，点击展开，点击合起； wxml: <view class='box'> <block wx:for="{{textList}}"> <view class='text-item'> <view class='text-name'>{{item.title}}</view> <view class='text-desc' style="{{ite

小程序上拉菜单(手风琴效果）

qq_46544185的博客

07-20

575

小程序上/下拉菜单（手风琴效果）带动画

小程序中实现手风琴效果可以折叠可以展开，重点是改变数组中的对象的属性值

qq_38274119的博客

09-02

426

changeFlag(event){ // this.setData({ // flag:event.target.dataset.alphaBeta // }) var selectedIndex = event.target.dataset.alphaBeta; let completeStatus = list[${selectedIndex}].flag; this.setData({ [completeStatus]:!this.data.list[selectedIndex].flag })

小程序实现循环输出折叠面板

三七_z

08-22

394

wxml <view style="margin:0 24rpx;width:702rpx;"> <block wx:for="{{info}}" wx:key="{{index}}"> <view class="info-list" data-index="{{index + 1}}" catchtap="onChangeShowStat...

【微信小程序】实现折叠功能，折叠不同的列表