更新记录

1.1.1（2019-07-19）

-

1.1.0（2019-07-15）

- - 查看更多

Collapse 折叠面板

uni-collapse、uni-collapse-item，代码块： uCollapse。 使用方式： script 中引用组件

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

一般用法

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

手风琴效果

  1. <uni-collapse accordion="true">    <uni-collapse-item title="标题文字">        <view style="padding: 30upx;">            手风琴效果        </view>    </uni-collapse-item>    <uni-collapse-item title="标题文字">        <view style="padding: 30upx;">            手风琴效果        </view>    </uni-collapse-item>    <uni-collapse-item title="标题文字">        <view style="padding: 30upx;">            手风琴效果        </view>    </uni-collapse-item></uni-collapse>

带图标

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

uniCollapse 属性说明： uniCollapse 事件说明： uniCollapse 方法说明： 代码示例

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

Tips

  • resize 方法。推荐在 this.nextTick() 中使用 uniCollapseItem 属性说明： Tips -

    更新日志

    1.1.1
  • 1.1.0
  • 修复 在 v-for 循环中，组件报错的 bug
  • 1.0.0
  • 初始项目