collapse-view 伸缩视图

视图容器，定义收缩时的高度，可以滑动展开，常用于承载内容较多又不想占用全屏的场景。

使用指南

设置收缩状态最大高度

<tms-collapse-view collapse-height="790rpx">
  <view class="content">
  </view>
</tms-collapse-view>

设置最大展开高度

<tms-collapse-view collapse-height="790rpx" maxHeight="80vh">
  <view class="content">
  </view>
</tms-collapse-view>

popup模式，从底部弹出

Component({
  data: {
    show: false,
  },
  methods: {
    showOrHide() {
      this.setData({
        show: !this.data.show,
      });
    }
  }
})

<button bindtap="showOrHide">显示、隐藏容器</button>
<tms-collapse-view collapse-height="790rpx" show="{{show}}" popup>
  <view class="content">
  </view>
</tms-collapse-view>

伸缩模式下手动控制伸缩

Component({
  data: {
    forceCollapse: false,
  },
  methods: {
    collapseOrExtend() {
      this.setData({
        forceCollapse: !this.data.forceCollapse,
      });
    }
  }
})

<button bindtap="collapseOrExtend">收缩或展开视图</button>
<tms-collapse-view collapse-height="790rpx" collapse="{{forceCollapse}}">
  <view class="content">
  </view>
</tms-collapse-view>

高度变化时更新组件

Component({
  attached() {
    this.selectComponent('#vCollapse').reSize()
  }
})

<tms-collapse-view collapse-height="790rpx" id="vCollapse">
  <!-- content的高度会发生变化  -->
  <view class="content">
  </view>
</tms-collapse-view>

API

tms-collapse-view组件上的api列表

参数	说明	类型	可选值	默认值
collapse-height	内容大于该高度 + threshold高度时开启伸缩模式。	String	—	45vh
collapse	伸缩模式下，手动控制收缩或展开视图。	Boolean	—	true
max-height	最大高度	String	—	100vh
cover	显示全局遮罩层。	Boolean	—	false
animate-duration	伸缩动画时常。	Number	—	300
threshold	超过收缩高度多少像素后开启伸缩模式，单位px	Number	—	50
enable-number	滑动超过多少像素后，自动滚动到另一状态。	Number	—	40
z-index	根元素z-index。	Number	—	500
lock-scroll	蒙层阻止下层元素滑动，阻止事件穿透。	Boolean	—	true
popup	popup模式，不占用文档流高度，从底部弹出。	Boolean	—	false
control	popup模式下，点击蒙层不自动隐藏组件。	Boolean	—	false
show	popup模式时生效，控制显示隐藏组件。	Boolean	—	false
popup-duration	popup模式时生效，弹出动画耗时，单位毫秒。	Number	—	500
popup-style	popup组件根元素样式。	String	—

实例方法

• reSize

当内容高度变化时，需要调用该方法重新排版。

常见场景：组件挂载时，内容高度不够，不会进入伸缩模式，异步获取数据后，内容高度变更了，需要调用reSize方法，才能进入伸缩模式。

this.selectComponent('#vCollapse').reSize()

EVENTS

事件名	说明	参数
bind:on-collapse	视图收缩时触发	—
bind:on-extend	视图展开时触发	—
bind:on-click-overlay	点击遮罩层触发	—

CSS变量

// 面板默认背景色
--collapse-view-background：#fff;
// 遮罩层颜色
--collapse-view-cover: rgba(0, 0, 0, .5);

FAQ