zfire-front/new-greemall-wxapp: 新分销商城小程序

FengChaoYu 184ebdda37 新提交		hai 10 meses
..
components	184ebdda37 新提交	hai 10 meses
changelog.md	184ebdda37 新提交	hai 10 meses
package.json	184ebdda37 新提交	hai 10 meses
readme.md	184ebdda37 新提交	hai 10 meses

Collapse 折叠面板

组件名：uni-collapse 代码块： uCollapse 关联组件：uni-collapse-item、uni-icons。

折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。

注意事项 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

组件需要依赖 sass 插件，请自行手动安装

App 端默认关闭组件动画，因为 height 动画开销比较大，会导致页面卡顿，请酌情使用动画

如在使用组件过程从发现卡顿严重，请尝试停用组件动画，问题原因如上

在小程序端组件内容发生变化，需要手动调用 resize() 方法，手动更新几点信息，避免出现内容错位

如需自定义组件默认边框颜色等，请使用插槽自定义内容并合理使用 border 和 title-border 属性

折叠面板仅支持嵌套使用，请勿单独使用

组件支持 nvue ，需要在 manifest.json > app-plus 节点下配置 "nvueStyleCompiler" : "uni-app"

如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

如需通过npm方式使用uni-ui组件，另见文档：https://ext.dcloud.net.cn/plugin?id=55

基本用法

使用 title 属性指定面板显示内容

使用 open 属性默认打开当前面板

使用 disabled 属性禁用面板

<uni-collapse>
	<uni-collapse-item title="默认开启" :open="true">
		<text>折叠内容</text>
	</uni-collapse-item>
	<uni-collapse-item title="折叠内容">
			<text>折叠内容</text>
	</uni-collapse-item>
	<uni-collapse-item title="禁用状态" disabled>
		<text>折叠内容</text>
	</uni-collapse-item>
</uni-collapse>

手风琴效果

使用 accordion 属性，可以仅打开一个面板并关闭其他已经打开的面板，效果类似手风琴

设置 accordion 属性时，open 属性则生效在最后一个组件

<uni-collapse accordion>
	<uni-collapse-item title="手风琴效果">
		<text>折叠内容</text>
	</uni-collapse-item>
	<uni-collapse-item title="手风琴效果">
			<text>折叠内容</text>
	</uni-collapse-item>
	<uni-collapse-item title="禁用状态" disabled>
		<text>折叠内容</text>
	</uni-collapse-item>
</uni-collapse>

动态设置折叠面板打开状态

使用 v-model 属性，动态设置面板的显示状态

使用 name 属性设置每个面板的唯一标识，如不设置使用默认索引，从字符串 "0" 开始记数

注意

如果 accordion 属性为 true 则 v-model 类型为 String
如果 accordion 属性为 false 则 v-model 类型为 Array
请注意 v-model 属性与 open 属性请勿一起使用，建议只使用 v-model

<uni-collapse v-model="value">
	<uni-collapse-item name="key1" title="默认开启">
		<text>折叠内容</text>
	</uni-collapse-item>
	<uni-collapse-item name="key2" title="默认开启">
			<text>折叠内容</text>
	</uni-collapse-item>
	<uni-collapse-item name="key3" title="默认不开启">
			<text>折叠内容</text>
	</uni-collapse-item>
</uni-collapse>

export default {
	data(){
		return {
			value:['key1','key2'],
			// 如果设置了 accordion 属性，则使用 string 类型
			// value:'key1'
		}
	}
}

使用动画

使用 show-animation 属性开启或关闭面板折叠动画，默认动画开启

注意

App 端默认关闭组件动画，因为 height 动画开销比较大，会导致页面卡顿，请酌情使用动画，如出现明显卡顿，尝试关闭动画

<uni-collapse>
	<uni-collapse-item :show-animation="true" title="开启动画">
		<text>折叠内容</text>
	</uni-collapse-item>
	<uni-collapse-item :show-animation="true"  title="开启动画">
			<text>折叠内容</text>
	</uni-collapse-item>
	<uni-collapse-item :show-animation="false"  title="不开启动画">
			<text>折叠内容</text>
	</uni-collapse-item>
</uni-collapse>

配置图片

使用 thumb 配置图片地址，可在面板左侧显示一个图片

如需显示更多内容，如图标等，请见下方自定义插槽的说明

<uni-collapse>
	<uni-collapse-item title="标题文字"
		thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
		<view class="content">
			<text class="text">折叠内容主体，可自定义内容及样式</text>
		</view>
	</uni-collapse-item>
</uni-collapse>

自定义插槽

如果需要自定义面板显示，可以使用 title 插槽达成完全自定义。下面是一个使用 uni-list 的列表示例，需要引入 uni-list 组件

<uni-collapse>
	<!-- 因为list默认带一条分隔线，所以使用 titleBorder="none" 取消面板的分隔线 -->
	<uni-collapse-item title-border="none" :border="false">
		<template v-slot:title>
			<uni-list>
				<uni-list-item title="标题使用自定义标题插槽" :show-extra-icon="true" :extra-icon="extraIcon">
				</uni-list-item>
			</uni-list>
		</template>
		<view class="content">
			<text class="text">折叠内容主体，可自定义内容及样式</text>
		</view>
	</uni-collapse-item>
</uni-collapse>

注意

在折叠面板组件中使用list时，在 App-Nvue 下请勿单独使用 uni-list-item，会导致组件无法正常显示，其他平台不做限制
在默认插槽里使用 uni-list 组件与上方示例一样，直接写在默认插槽里即可

API

Collapse Props

属性名	类型	默认值	说明
value/v-model	String/Array	-	当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
accordion	Boolean	false	是否开启手风琴效果

Collapse Event

事件称名	说明	返回值
@change	切换面板时触发	切换面板时触发，如果是手风琴模式，返回类型为string，否则为array

Collapse Methods

方法名称	说明
resize	更新当前列表高度

提示

resize 方法解决动态添加数据，带动画的折叠面板高度不更新的问题
需要在数据渲染完毕之后使用 resize 方法。推荐在 this.$nextTick() 中使用

当前只有小程序端需要调用此方法，H5\App 端已经做了处理，不需要手动更新高度

<view>
  <uni-collapse ref="collapse" v-model="value">
      <uni-collapse-item title="默认开启" >
          <view class="content">
              <text class="text">{{content}}</text>
          </view>
      </uni-collapse-item>
      <uni-collapse-item title="折叠内容">
          <view class="content">
              <text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>
          </view>
      </uni-collapse-item>
  </uni-collapse>
  <button class="button" type="primary" @click="add">动态修改内容</button>
</view>

export default {
data() {
  return {
      value:['0'],
      content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
  }
},
methods: {
  add() {
      if (this.content.length > 35) {
          this.content = '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。'
      } else {
          this.content = '折叠内容主体，这是一段比较长内容。通过点击按钮修改后内容后，使组件高度发生变化，在次点击按钮恢复之前的内容和高度。'
      }
      // TODO 小程序中不支持自动更新 ，需要手动resize 更新组件高度
      // #ifdef MP
      this.$nextTick(() => {
          this.$refs.collapse.resize()
      })
      // #endif
  }
}
}

CollapseItem Props

属性名	类型	默认值	说明
title	String	-	标题文字
thumb	String	-	标题左侧缩略图
disabled	Boolean	false	是否禁用
open	Boolean	false	是否展开面板
show-animation	Boolean	false	开启动画
border	Boolean	true	折叠面板内容分隔线
title-border	String	auto	折叠面板标题分隔线可选值见下方 TitleBorder Params

TitleBorder Params

参数名	说明
auto	分隔线自动显示
none	不显示分隔线
show	一直显示分隔线

Collapse Slots

插槽名	说明
default	默认插槽
title	面板标题插槽，如使用此插槽禁用样式效果将失效

组件示例

点击查看：https://hellouniapp.dcloud.net.cn/pages/extUI/collapse/collapse

readme.md