• 更新记录
  • 1.1.1（2019-07-19）
  • 1.1.0（2019-07-15）
    • Collapse 折叠面板
    • 更新日志

    更新记录

    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

    • 初始项目