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

最新推荐文章于 2024-04-19 09:42:27 发布

gyuei

最新推荐文章于 2024-04-19 09:42:27 发布

阅读量2k

点赞数 1

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/gyueh/article/details/107488513

版权

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

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>

js部分代码如下：

Page({

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