uniapp组件库中Collapse 折叠面板 的使用方法

简介: uniapp组件库中Collapse 折叠面板 的使用方法

通过折叠面板收纳内容区域

#平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序

#基本使用

默认为手风琴模式,即打开一个,另外所有的都会关闭。可以将u-collapseaccordion设置为false,这样可以允许打开多个面板

<template>
  <u-collapse>
    <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
      {{item.body}}
    </u-collapse-item>
  </u-collapse>
</template>
 
<script>
  export default {
    data() {
      return {
        itemList: [{
          head: "赏识在于角度的转换",
          body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人,值得赏识的东西便会扑面而来",
          open: true,
          disabled: true
        },{
          head: "生活中不是缺少美,而是缺少发现美的眼睛",
          body: "学会欣赏,实际是一种积极生活的态度,是生活的调味品,会在欣赏中发现生活的美",
          open: false,
        },{
          head: "周围一些不起眼的人、事、物,或许都隐藏着不同凡响的智慧",
          body: "但是据说雕刻大卫像所用的这块大理石,曾被多位雕刻家批评得一无是处,有些人认为这块大理石采凿得不好,有些人嫌它的纹路不够美",
          open: false,
        }],
      }
    }
  }
</script>

#控制面板的初始状态,以及是否可以操作

  • 设置u-collapse-itemopen参数为true,可以让面板初始化时为打开状态
  • 如果设置u-collapse-itemdisabled参数为true,那么面板会保持初始状态,无法关闭或打开
<template>
  <u-collapse>
    <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index" :open="item.open" :disabled="item.disabled">
      {{item.body}}
    </u-collapse-item>
  </u-collapse>
</template>
 
<script>
  export default {
    data() {
      return {
        itemList: [{
          head: "赏识在于角度的转换",
          body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人,值得赏识的东西便会扑面而来",
          open: true,
          disabled: true
        },{
          head: "生活中不是缺少美,而是缺少发现美的眼睛",
          body: "学会欣赏,实际是一种积极生活的态度,是生活的调味品,会在欣赏中发现生活的美",
          open: false,
        },{
          head: "周围一些不起眼的人、事、物,或许都隐藏着不同凡响的智慧",
          body: "但是据说雕刻大卫像所用的这块大理石,曾被多位雕刻家批评得一无是处,有些人认为这块大理石采凿得不好,有些人嫌它的纹路不够美",
          open: false,
        }],
      }
    }
  }
</script>

#自定义样式

在此组件中,可以通过多个方式对每个Item进行样式定义,我们可以从如下方面思考和着手:

#1. 如果修改展开后的内容?
  • 因为是通过默认的slot传入的(见上方示例),我们可以加一个view元素当做外层,在父组件给它添加样式,如下:
<template>
  <u-collapse :item-style="itemStyle" event-type="close" :arrow="arrow" :accordion="accordion" @change="change">
    <u-collapse-item :index="index" @change="itemChange" :title="item.head" v-for="(item, index) in itemList" :key="index">
      <view class="collapse-item">
        {{item.body}}
      </view>
    </u-collapse-item>
  </u-collapse>
</template>
 
<style scoped>
  .collapse-item {
    color: red;
    padding-bottom: 10px;
  }
</style>
  • 通过Collapsebody-style参数也可以配置主体内容的样式,需要注意上面的自定义slot内容如果在父组件定义了样式,会优先起作用。
#2. 如何自定义标题的样式?

如果想修改头部标题的字体大小,颜色等,可以通过head-style参数修改。

#3. 如何修改整个Item的样式?

有时候我们需要修改Item的整体样式,比如将各个Item之间隔开,这时我们可以通过item-style参数进行设置,比如:

<template>
  <u-collapse :item-style="itemStyle">
    ......
  </u-collapse>
</template>
 
<script>
export default {
  data() {
    return {
      itemStyle: {
        marginTop: '20px'
      }
    }
  }
}
</script>

#API

#Collapse Props

参数 说明 类型 默认值 可选值
accordion 是否手风琴模式 Boolean true false
arrow 是否显示标题右侧的箭头 Boolean true false
arrow-color 标题右侧箭头的颜色 String #909399 -
item-style1.3.0 整个Item的自定义样式,对象形式 Object - -
head-style Item的标题自定义样式,对象形式 Object - -
body-style Item的主体自定义样式,对象形式 Object - -
hover-class 样式类名,按下时有效,样式必须写在根目录的App.vue或通过其引入的全局样式中才有效,none为无效果,作用于头部标题区域 String u-hover-class none / 其他

#Collapse Item Props

参数 说明 类型 默认值 可选值
title 面板标题 String - -
index 主要用于事件的回调,标识那个Item被点击 String / Number - -
disabled 面板是否可以打开或收起 Boolean false true
open 设置某个面板的初始状态是否打开 Boolean false true
name 唯一标识符,如不设置,默认用当前collapse-item的索引值 String / Number - -
align 标题的对齐方式 String left -
active-style 不显示箭头时,可以添加当前选择的collapse-item活动样式,对象形式 Object - -

#Collapse Event

注意:请在<u-collapse></u-collapse>上监听此事件

事件名 说明 回调参数
change 当前激活面板展开时触发(如果是手风琴模式,参数activeNames类型为String,否则为Array) activeNames: String / Array

#Collapse Item Event

注意:请在<u-collapse-item></u-collapse-item>上监听此事件

事件名 说明 回调参数
change 某个item被打开或者收起时触发 对象,{index: index, show: true | false },index为collapse-itemindex参数,show为true表示被打开,false表示被收起

#Collapse Methods

注意:此方法需要通过ref调用

方法 说明
init 1.3.8 重新初始化内部高度计算,用于异步获取内容的情形,请结合this.$nextTick()使用

#Slot

名称 说明
- 主体部分的内容
title 1.3.5 头部的内容,不含右边的箭头
title-all 1.3.5 整个头部的内容,包含右边的箭头


相关文章
|
1月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
53 10
|
1月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
82 5
|
1月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
71 2
|
1月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
63 1
|
1月前
Uniapp矩阵评分组件
Uniapp矩阵评分组件
49 1
|
19天前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
35 0
|
1月前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
35 0
|
1月前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
60 0
|
1月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
84 0
|
4月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
114 4

热门文章

最新文章