更新记录

1.1.1（2019-07-19）

  • 修复 依赖组件找不到的问题

1.1.0（2019-07-15）

  • 修复 在 v-for 循环中，组件报错的 bug
    • 修复 提供在动画模式下，动态渲染数据，高度不更新的解决方案查看更多

Collapse 折叠面板

展示可以折叠 / 展开的内容区域，组件名：uni-collapse、uni-collapse-item，代码块： uCollapse。

使用方式：

在 script 中引用组件 

  1. import {uniCollapse,uniCollapseItem} from "uni-ui"
  2. export default {
  3.     components: {uniCollapse,uniCollapseItem}
  4. }

一般用法

  1. <uni-collapse @change="change">
  2.     <uni-collapse-item title="标题文字">
  3.         <uni-list>
  4.             <uni-list-item title="标题文字" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png"></uni-list-item>
  5.             <uni-list-item title="标题文字" note="描述信息" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png"></uni-list-item>
  6.             <uni-list-item title="标题文字" note="描述信息" show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-list-item>
  7.         </uni-list>
  8.     </uni-collapse-item>
  9.     <uni-collapse-item title="默认开启" open="true">
  10.         <view style="padding: 30upx;"> 折叠内容主体，可自定义内容及样式 </view>
  11.     </uni-collapse-item>
  12.     <uni-collapse-item title="禁用状态" disabled="true">
  13.         <view style="padding: 30upx;"> 禁用状态 </view>
  14.     </uni-collapse-item>
  15. </uni-collapse>

手风琴效果

  1. <uni-collapse accordion="true">
  2.     <uni-collapse-item title="标题文字">
  3.         <view style="padding: 30upx;">
  4.             手风琴效果
  5.         </view>
  6.     </uni-collapse-item>
  7.     <uni-collapse-item title="标题文字">
  8.         <view style="padding: 30upx;">
  9.             手风琴效果
  10.         </view>
  11.     </uni-collapse-item>
  12.     <uni-collapse-item title="标题文字">
  13.         <view style="padding: 30upx;">
  14.             手风琴效果
  15.         </view>
  16.     </uni-collapse-item>
  17. </uni-collapse>

带图标

  1. <uni-collapse>
  2.     <uni-collapse-item title="标题文字" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png">
  3.         <view style="padding: 30upx;">
  4.             折叠内容主体，可自定义内容及样式
  5.         </view>
  6.     </uni-collapse-item>
  7.     <uni-collapse-item title="标题文字" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png">
  8.         <view style="padding: 30upx;">
  9.             折叠内容主体，可自定义内容及样式
  10.         </view>
  11.     </uni-collapse-item>
  12. </uni-collapse>

uniCollapse 属性说明：

属性名类型默认值说明
accordionBooleanfalse是否开启手风琴效果

uniCollapse 事件说明：

事件称名说明返回参数
change切换面板时触发activeNames（Array）：展开状态的uniCollapseItem的name值

uniCollapse 方法说明：

事件称名说明
resize通过 ref 使用，更新当前列表高度，只有 animation:true 下生效

代码示例

  1. <uni-collapse @change="change">
  2.     <uni-collapse-item ref="add" title="动画效果" :show-animation="true" open="true">
  3.         {{ content }}
  4.     </uni-collapse-item>
  5. </uni-collapse>
  1. export default {
  2.     data() {
  4.         return {
  5.             content: '一段短文字',
  6.         };
  7.     },
  8.     methods: {
  9.         () {
  10.             this.content = "这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。这是一段长文字，高度会发生变化。"
  11.             this.$nextTick(() => {
  12.                 this.$refs.add.resize();
  13.             });
  14.         }
  15.     }
  16. };

Tips

  • resize 方法解决动态添加数据，带动画的折叠面板高度不更新的问题
  • 需要在数据渲染完毕之后使用 resize 方法。推荐在 this.nextTick() 中使用 uniCollapseItem 属性说明：
属性名类型默认值说明
titleString-标题文字
thumbString-标题左侧缩略图
disabledBooleanfalse是否禁用
openBooleanfalse是否展开面板
animationStringfalse开启动画

Tips

  • 本组件需要使用自定义组件模式，非自定义组件使用，会出现问题。

更新日志

1.1.1

  • 修复 依赖组件找不到的问题 1.1.0

  • 修复 在 v-for 循环中，组件报错的 bug

  • 修复 提供在动画模式下，动态渲染数据，高度不更新的解决方案 1.0.0

  • 初始项目