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

2024-12-16 07:04:41

本文实例为大家分享了微信小程序实现手风琴折叠面板的具体代码，供大家参考，具体内容如下

目的：折叠面板默认显示其中一项，利用toggle实现元素的显示和隐藏
例如：页面中有四个可折叠元素，默认元素1显示，其余项目内容隐藏；当点击元素2时，元素2显示，其余项目内容隐藏。
初始效果如图：

1.wxml部分代码如下：

<view class='item' wx:for="{{items}}" wx:key="index">
    <view class='title' data-index="{{index}}" bindtap='panel'>
        {{item.title}}
    </view>
    <view class='detail' wx:if="{{showIndex == index}}">{{item.text}}</view>
</view>

2.js部分代码如下：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    showIndex: 0, //默认第一个项目显示
    items: [{
      title: '折叠项目1',
      text: '项目1的内容'
    }, {
      title: '折叠项目2',
      text: '项目2的内容',
    }, {
      title: '折叠项目3',
      text: '项目3的内容',
    }]
  },

  panel: function (e) {
    console.log(this.data)
    //获取到当前点击元素的下标
    let index = e.currentTarget.dataset.index;
    //当前显示隐藏内容的元素
    let showIndex = this.data.showIndex;
    if (index != showIndex) {
      this.setData({
        showIndex: index
      })
    } else {
      this.setData({
        showIndex: 0
      })
    }
  },
})

3.css部分代码如下：

.item {
  margin: 10rpx auto;
}
 .item .title {
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #f2f2f2;
  display: flex;
}

.item .detail {
  margin: 10rpx auto;
  font-size: 25rpx;
  line-height: 40rpx;
  text-indent: 2em;
}

最终效果如图所示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序实现折叠面板

本文实例为大家分享了微信小程序MUI折叠面板的具体代码,供大家参考,具体内容如下实现原理通过控制详情部分的显示隐藏,来实现折叠效果,同时切换右侧向下箭头. 效果图 WXML  <view class="tui-accordion-content"> <view class="tui-menu-list {{isShowFrom1 ? 'tui-shangjiantou'
微信小程序实现折叠与展开文章功能

需求页面折叠超出的的部分显示省略号,点击展开后显示全部内容需要解决的问题箭头随展开折叠后箭头方向的变化当点击箭头文本显示内容的变化如何解决? 箭头方向的变化是一个点击事件bindtap,点击后更换小图标: 文本变化是一个show或者hide的事情,折叠的时候有个多行文本溢出得问题五个属性(display: -webkit-box,-webkit-box-orient: vertical, -webkit-line-clamp,text-overflow,overflow) 状态与数据绑
微信小程序实现折叠展开效果

本文实例为大家分享了微信小程序实现折叠展开效果的具体代码,供大家参考,具体内容如下 wxml: <view class="page">  <view class="li" bindtap='changeToggle'> <view class="left">总数</view> <view class="right gray" >8&l
微信小程序实现手风琴折叠面板

本文实例为大家分享了微信小程序实现手风琴折叠面板的具体代码,供大家参考,具体内容如下目的:折叠面板默认显示其中一项,利用toggle实现元素的显示和隐藏例如:页面中有四个可折叠元素,默认元素1显示,其余项目内容隐藏:当点击元素2时,元素2显示,其余项目内容隐藏.初始效果如图: 1.wxml部分代码如下: <view class='item' wx:for="{{items}}" wx:key="index"> <view class='t
微信小程序之swiper滑动面板用法示例

本文实例讲述了微信小程序之swiper滑动面板用法.分享给大家供大家参考,具体如下: swiper就是为了以后做轮播图用的.下面是一些它的属性 PS:关于微信小程序组件可参考本站在线工具微信小程序组件说明表http://tools.jb51.net/table/wx_component 或官网https://developers.weixin.qq.com/miniprogram/dev/component/ 1.首先新建一个page(记得在app.json中注册),上效果图. 2.index.
微信小程序（应用号）组件详细介绍

这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具,如上图.点击添加项目,会出现新建项目页面,如下图: 其中AppID随意填写.ps:正式开发了估计有要求的.填写项目名称并选择保存的路径,添加项目就ok了. 就这样,一个hello world 就OK了. 古人云,一图胜千言,大家直接看图就ok 好了,我们现在开始讲解微信小程序的组件. 先倒入官方流出
微信小程序下载工具及调试详解

昨天晚些时候微信团队发布了微信小程序开发者工具.微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序.以下是官方文档,内含小程序开发者工具下载地址及调试指南. 下载地址:开发者工具0.9.092300版 windows 64版:windows 32版:mac版为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能. devtools 扫码登录启动工具时,
微信小程序开发工具快捷键整理

微信小程序微信开发者工具快捷键,最近学习研究微信小程序,用了不少快捷键,索性记录下来,后续如果有其它的快捷键继续增加, 微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看. 我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化. 现在貌似不能修改.如果有同学找到修改的方法,麻烦告诉我.谢谢. 微信小程序代码编辑快捷键常用快捷键格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, C
微信小程序之ES6与事项助手的功能实现

由于官方IDE更新到了0.11.112301版本,移除了对Promise的支持,造成事项助手不能正常运行,解决此问题,在项目中引入第三方兼容库Bluebird支持Promise,代码已经整合到项目代码中. 好久没有写关于微信小程序的随笔了,其实是不知道写点什么好,之前的豆瓣图书和知乎日报已经把小程序的基础部分写的很详细了,高级部分的API有些还得不到IDE的调试支持.之前发表了知乎日报小例,有网友问我小程序有没有关于日历显示的组件,可以显示所有天数的,自己看了一遍,好像没有这个组件,所以打算那这
微信小程序轮播图swiper详解及实例（源码下载）

微信小程序 swiper 轮播图前言: 1.更新了v0.12的版本后,每次保存都弹出来一个打开文件窗口. 2.swiper组件的属性indicator-dots,值为false时,面板指示点还是显示.要把indicator-dots属性直接删掉. 下面进入正题:默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等.... 首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码

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

相关推荐

随机推荐