qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Accordion 手风琴

可以折叠 / 展开的内容区域。

使用指南

import { AtAccordion } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/accordion.scss";

一般用法

说明：

  • 该组件为受控组件，开发者通过 open 来控制组件开关状态，可通过触发 onClick 函数时修改 open 实现状态切换
<template>
  <AtAccordion
    @click="onClick"
    title='标题一'
    :open="value1"
  >
    <AtList :hasBorder="false">
      <AtListItem
        title='标题文字'
        thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
      />
      <AtListItem
        title='标题文字'
        note='描述信息'
        thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
      />
    </AtList>
  </AtAccordion>
</template>

<script>
import { AtAccordion, AtList, AtListItem } from 'taro-ui-vue3'
export default {
  name: 'AccordionDemo',
  components: {
    AtAccordion,
    AtList,
    AtListItem
  },
  data() {
    return {
      value1: false
    }
  },
  methods: {
    onClick(val) {
      this.value1 = val
    }
  },
}
</script>

带图标

<template>
  <view class='example-item'>
    <AtAccordion
      title='标题三'
      :open="value3"
      :icon="{ value: 'tags', color: '#77a1fd' }"
      @click="onClick"
    >
      <AtList :hasBorder="false">
        <AtListItem
          title='标题文字'
          thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
        />
        <AtListItem
          title='标题文字'
          note='描述信息'
          thumb='http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'
        />
      </AtList>
    </AtAccordion>
  </view>
</template>

<script>
import { AtAccordion, AtList, AtListItem } from 'taro-ui-vue3'
export default {
  name: 'AccordionDemo',
  components: {
    AtAccordion,
    AtList,
    AtListItem
  },
  data() {
    return {
      value3: false
    }
  },
  methods: {
    onClick(val) {
      this.value3 = val
    }
  },
}
</script>

参数

参数说明类型可选值默认值
open是否默认开启Boolean-false
title标题String--
hasBorder是否有头部下划线Boolean-true
isAnimation是否开启动画Boolean-true
icon图标，仅支持 AtIcon 支持的类型，object 属性有 value color size prefixClassobject--
note描述信息string--

事件

事件名称说明返回参数
onClick点击头部触发事件(open,event) => void