安装

tnpm install --save @alipay/adc-folder

组件介绍

行业小程序折叠组件，可对文本或其他任意类型的元素进行折叠，满足常见的折叠需求。

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: className | 否 | string | 组件容器自定义类名 | -- | -- id | 否 | string | 如果一个页面仅引入一个折叠组件，此属性可不填。但如果引入了多个折叠组件，则必须给每个组件设一个唯一的id | -- | -- lineClamp | 否 | number | 如果是对文本进行折叠，此属性可设置文本折叠行数 | 3 | -- maxHeight | 否 | string | 手动设置折叠元素的初始最大高度，优先级高于lineClamp。对非文本类型的元素进行折叠时为必填 | '' | '80rpx' folderBtnPosition | 否 | 'right' | 'center' | 按钮的位置和样式 | 'right' | -- folderBtnText | 否 | string | 按钮文本内容 | '展开' | '查看更多' | --

在小程序中使用

{
  "usingComponents": {
    "adc-folder": "@alipay/adc-folder/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
<adc-folder>
  <view class="article">
    康桥的灵性全在一条河上;康河，我敢说是全世界最秀丽的一条水。河的名字是葛兰大(Granta)，也有叫康河(Kiver Cam)的，许有上下流的区别，我不甚清楚。河身多的是曲折，上游是有名的拜伦潭——“Byron’s
    Pool”——当年拜伦常在那里玩的;有一个老村子叫格兰骞斯德，有一个果子园，你可以躺在累累的桃李树荫下吃茶，花果会掉入你的茶杯，小雀子会到你桌上来啄食，那真是别有一番天地。这是上游;下游是从骞斯德顿下去，河面展开，那是春夏间竞舟的场所。上下河分界处有一个坝筑，水流急得很，在星光下听水声，听近村晚钟声，听河畔倦牛刍草声，是我康桥经验中最神秘的一种：大自然的优美、宁静，调谐在这星光与波光的默契中不期然的淹入了你的性灵。
  </view>
</adc-folder>

注意事项

此组件只针对静态内容做折叠。因此，如果加载的是一段异步传入的文本（如网络获取）， 需要在获取内容完成后，再渲染此组件。例如：

<adc-folder a:if="{{loaded}}">
  <view class="article">
    {{textFromServer}}
  </view>
</adc-folder>

Slot

Name | 说明 | 是否必传 --|:--:|:--: default | 待折叠的内容 | 是 folder-btn | 自定义展开按钮 | 否

Badges