LayUI前框框架普及版

LayUI一、课程目标代码语言：javascript代码运行次数：0运行复制1. 【了解】LayUI框架

2. 【理解】LayUI基础使用

3. 【掌握】LayUI页面元素

4. 【掌握】LayUI内置模块二、LayUI基本使用2.1 概念layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

2.2 下载2.2.1 官网下载官网 : https://layuion.com/

官方文档:https://layuion.com/docs/

2.2.2 目录结构官网下载后，解压文件，目录结构如下

代码语言：javascript代码运行次数：0运行复制├─css //css目录

│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）

│ │ ├─laydate

│ │ ├─layer

│ │ └─layim

│ └─layui.css //核心样式文件

├─font //字体图标目录

├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）

│─lay //模块核心目录

│ └─modules //各模块组件

│─layui.js //基础核心库

└─layui.all.js //包含layui.js和所有模块的合并文件获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：

代码语言：javascript代码运行次数：0运行复制./layui/css/layui.css

./layui/layui.js2.3 简单实例LayUI的使用基本分为两个方面：

**页面元素：**主要是进行页面样式的修改，通过指定的layUI的class进行设置，只需要引入LayUI.css即可使用

**内置模块：**进行页面动态效果功能的展示，通过指定的layUI的相应代码进行书写，需要引入LayUI.js并按照指定格式进行书写

代码语言：javascript代码运行次数：0运行复制

三、LayUI页面元素layui 提倡返璞归真，遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的 HTML 和 CSS 代码，不同的是，在 HTML 结构上及 CSS 定义上需要稍稍遵循一定的规范。

3.1 栅格为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统，将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

采用 layui-row 来定义行，如：

2.采用类似 layui-col-md 这样的预设类来定义一组列（column），且放在行（row）内。其中：

变量md 代表的是不同屏幕下的标记（可选值见下文）

变量代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12

如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

3.列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。

4.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。

5.最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！3.1.1 示例代码语言：javascript代码运行次数：0运行复制

3.2 颜色视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感，而 layui 提供的颜色，清新而不乏深沉，互相柔和，不过分刺激大脑皮层的神经反应，形成越久越耐看的微妙影像。合理搭配，可与各式各样的网站避免违和，从而使你的 Web 平台看上去更为融洽。

3.2.1 常用主色3.2.2 场景色3.2.3 极简中性色3.2.4 内置的背景色CSS类3.3 字体图标layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

3.3.1 使用通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class

例如：

代码语言：javascript代码运行次数：0运行复制3.3.2 内置图标一览表更多： https://www.layui.com/doc/element/icon.html

3.4 动画layui 的动画全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9无动画）

3.4.1 使用动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如：

代码语言：javascript代码运行次数：0运行复制其中 layui-anim 是必须的，后面跟着的即是不同的动画类

循环动画，追加：layui-anim-loop

3.4.2 基本动画3.5 按钮layUI通过样式设置，可以将任意元素设置为相应的按钮样式

3.5.1 基本使用向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

代码语言：javascript代码运行次数：0运行复制一个标准的按钮

一个可跳转的按钮3.5.2 主题名称

组合

原始按钮

class=“layui-btn layui-btn-primary”

默认按钮

class=“layui-btn”

百搭按钮

class=“layui-btn layui-btn-normal”

暖色按钮

class=“layui-btn layui-btn-warm”

警告按钮

class=“layui-btn layui-btn-danger”

禁用按钮

class=“layui-btn layui-btn-disabled”

3.5.3 尺寸尺寸

组合

大型按钮

class=“layui-btn layui-btn-lg”

默认按钮

class=“layui-btn”

小型按钮

class=“layui-btn layui-btn-sm”

迷你按钮

class=“layui-btn layui-btn-xs”

可以与主题按钮组合使用

尺寸

组合

大型百搭

class=“layui-btn layui-btn-lg layui-btn-normal”

正常暖色

class=“layui-btn layui-btn-warm”

小型警告

class=“layui-btn layui-btn-sm layui-btn-danger”

迷你禁用

class=“layui-btn layui-btn-xs layui-btn-disabled”

也可以根据所在块自适应大小

代码语言：javascript代码运行次数：0运行复制流体按钮（最大化适应）3.5.4 圆角主题

组合

原始

class=“layui-btn layui-btn-radius layui-btn-primary”

默认

class=“layui-btn layui-btn-radius”

百搭

class=“layui-btn layui-btn-radius layui-btn-normal”

暖色

class=“layui-btn layui-btn-radius layui-btn-warm”

警告

class=“layui-btn layui-btn-radius layui-btn-danger”

禁用

class=“layui-btn layui-btn-radius layui-btn-disabled”

3.5.5 图标按钮代码语言：javascript代码运行次数：0运行复制

 添加

ဂ

3.5.6 按钮组将按钮放入一个*class=“layui-btn-group”*元素中，即可形成按钮组，按钮本身仍然可以随意搭配

代码语言：javascript代码运行次数：0运行复制

3.5.7 按钮容器尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器

代码语言：javascript代码运行次数：0运行复制

3.6 表单LayUI通过样式设置与特定的js实现了更具有风格样式的表单，但是依赖于相应的表单模块

3.6.1 简单使用在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

示例：

代码语言：javascript代码运行次数：0运行复制

输入框

密码框

辅助文字

选择框

北京

上海

广州

深圳

杭州

复选框

开关

单选框

文本域

立即提交

重置

3.6.2 行区块结构基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。

代码语言：javascript代码运行次数：0运行复制

3.6.3 输入框代码语言：javascript代码运行次数：0运行复制required：注册浏览器所规定的必填字段

lay-verify：注册form模块需要验证的类型

class=“layui-input”：layui.css提供的通用CSS类

3.6.4 下拉选择框3.6.4.1 默认选择框代码语言：javascript代码运行次数：0运行复制

请选择一个城市

北京

上海

杭州

3.6.4.2 分类选择框代码语言：javascript代码运行次数：0运行复制

请选择

你工作的第一个城市？

你的工号？

你最喜欢的老师？

3.6.4.3 搜索选择框以及通过设定属性 lay-search 来开启搜索匹配功能

代码语言：javascript代码运行次数：0运行复制

layer

form

layim

……

属性selected可设定默认项

属性disabled开启禁用，select和option标签都支持

3.6.5 复选框代码语言：javascript代码运行次数：0运行复制默认风格：

原始风格：

属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）

属性checked可设定默认选中

属性lay-skin可设置复选框的风格

设置*value=“1”*可自定义值，否则选中时返回的就是默认的on

3.6.6 开关其实就是checkbox复选框的“变种”，通过设定 lay-skin=“switch” 形成了开关风格

代码语言：javascript代码运行次数：0运行复制

属性checked可设定默认开

属性disabled开启禁用

属性lay-text可自定义开关两种状态的文本

设置*value=“1”*可自定义值，否则选中时返回的就是默认的on

3.6.7 单选框代码语言：javascript代码运行次数：0运行复制

属性title可自定义文本

属性disabled开启禁用

设置*value=“xxx”*可自定义值，否则选中时返回的就是默认的on

3.6.8 文本域代码语言：javascript代码运行次数：0运行复制3.6.9 表单方框风格通过追加 layui-form-pane 的class，来设定表单的方框风格

代码语言：javascript代码运行次数：0运行复制

内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：

单选框

3.7 导航导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。

3.7.1 水平导航代码语言：javascript代码运行次数：0运行复制

• 最新活动
• 产品
• 大数据

• 解决方案

  移动模块

  后台模版

  电商平台

• 社区

3.7.2 垂直/侧边导航代码语言：javascript代码运行次数：0运行复制

• 默认展开

  选项1

  选项2

  跳转

• 解决方案

  移动模块

  后台模版

  电商平台

• 产品
• 大数据

3.7.3 面包屑导航代码语言：javascript代码运行次数：0运行复制

首页

国际新闻

亚太地区

正文

可以通过设置属性 lay-separator=“-” 来自定义分隔符

代码语言：javascript代码运行次数：0运行复制

首页

国际新闻

亚太地区

正文

3.8 Tab选项卡Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。

依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用）

3.8.1 默认Tab选项卡代码语言：javascript代码运行次数：0运行复制

3.8.2 Tab简洁风格代码语言：javascript代码运行次数：0运行复制

3.8.3 Tab卡片风格通过追加class：layui-tab-card来设定卡片风格

代码语言：javascript代码运行次数：0运行复制

3.8.4 带删除的Tab你可以对父层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除

代码语言：javascript代码运行次数：0运行复制

3.9 进度条进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素

依赖加载组件：element

3.9.1 常规用法代码语言：javascript代码运行次数：0运行复制

属性 lay-percent ：代表进度条的初始百分比

3.9.2 显示进度比文本代码语言：javascript代码运行次数：0运行复制

注意：默认情况下不会显示百分比文本，如果你想开启，对属性lay-showPercent设置任意值即可，如：yes。但如果不想显示，千万别设置no或者false，直接剔除该属性即可。

3.9.3 大号进度条代码语言：javascript代码运行次数：0运行复制

默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。

3.10 面板一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等

依赖加载组件：element

3.10.1 卡片面板代码语言：javascript代码运行次数：0运行复制

如果你的网页采用的是默认的白色背景，不建议使用卡片面板。

3.10.2 折叠面板通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。

代码语言：javascript代码运行次数：0运行复制

3.10.3 手风琴面板在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。

代码语言：javascript代码运行次数：0运行复制

3.11 静态表格通过内置的自定义属性对其进行风格的多样化设定。

3.11.1 常规用法通过 layui-table 将表格样式修改

代码语言：javascript代码运行次数：0运行复制

昵称	加入时间	签名
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

3.11.2 基础属性属性名

属性值

备注

lay-even

无

用于开启 隔行 背景，可与其它属性一起使用

lay-skin=“属性值”

line （行边框风格） row （列边框风格） nob （无边框风格）

若使用默认风格不设置该属性即可

lay-size=“属性值”

sm （小尺寸） lg （大尺寸）

若使用默认尺寸不设置该属性即可

将所需要的基础属性写在table标签上即可，如（一个带有隔行背景，且行边框风格的大尺寸表格）：

代码语言：javascript代码运行次数：0运行复制

…

3.11.3 表格尺寸通过 lay-size=“sm” 或 *lay-size=“lg”*进行尺寸的切换

代码语言：javascript代码运行次数：0运行复制

小尺寸表格（内部结构参见右侧目录“常规用法”）

大尺寸表格（内部结构参见右侧目录“常规用法”）

3.12 徽章徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。

代码语言：javascript代码运行次数：0运行复制小圆点，通过 layui-badge-dot 来定义，里面不能加文字

椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式

6

99

61728

赤

橙

绿

青

蓝

黑

灰

边框体，通过 layui-badge-rim 来定义

6

Hot3.12.1 与其它元素的搭配按钮代码语言：javascript代码运行次数：0运行复制查看消息1

动态导航代码语言：javascript代码运行次数：0运行复制

<-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 -->

• 控制台9

• 个人中心

选项卡代码语言：javascript代码运行次数：0运行复制3.13 时间线按照指定设置样式书写

代码语言：javascript代码运行次数：0运行复制

• 

  8月18日

  layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。

  
  不枉近百个日日夜夜与之为伴。因小而大，因弱而强。

  
  无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 

• 

  8月16日

  杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。个人最爱的名篇有：

  • 《登高》
  • 《茅屋为秋风所破歌》

• 

  8月15日

  中国人民抗日战争胜利72周年

  
  常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代

  
  铭记、感恩

  
  所有为中华民族浴血奋战的英雄将士

  
  永垂不朽

• 

  过去

注意：

图标可以任意定义（但并不推荐更改）标题区域并不意味着一定要加粗内容区域可自由填充。四、LayUI内置模块LayUI提供了很多的内置模块，提供相应的效果与功能，为了减少代码的冗余，默认是不加载所有的模块的，所以需要在使用相应模块时加载对应模块

代码语言：javascript代码运行次数：0运行复制

4.1 日期选择laydate年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。

4.1.1 快速使用代码语言：javascript代码运行次数：0运行复制

4.1.2 elem 属性类型：String/DOM，默认值：无

必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

代码语言：javascript代码运行次数：0运行复制

4.1.3 type 属性类型：String，默认值：date

用于单独提供不同的选择器类型，可选值如下表：

type可选值

名称

用途

year

年选择器

只提供年列表选择

month

年月选择器

只提供年、月选择

date

日期选择器

可选择：年、月、日。type默认值，一般可不填

time

时间选择器

只提供时、分、秒选择

datetime

日期时间选择器

可选择：年、月、日、时、分、秒

代码语言：javascript代码运行次数：0运行复制

4.1.4 range 属性类型：Boolean/String，默认值：false

如果设置 true，将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。

代码语言：javascript代码运行次数：0运行复制

4.1.5 format 属性类型：String，默认值：yyyy-MM-dd

通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：

格式符

说明

yyyy

年份，至少四位数。如果不足四位，则前面补零

y

年份，不限制位数，即不管年份多少位，前面均不补零

MM

月份，至少两位数。如果不足两位，则前面补零。

M

月份，允许一位数。

dd

日期，至少两位数。如果不足两位，则前面补零。

d

日期，允许一位数。

HH

小时，至少两位数。如果不足两位，则前面补零。

H

小时，允许一位数。

mm

分钟，至少两位数。如果不足两位，则前面补零。

m

分钟，允许一位数。

ss

秒数，至少两位数。如果不足两位，则前面补零。

s

秒数，允许一位数。

通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如下所示：

格式

示例值

yyyy-MM-dd HH:mm:ss

2017-08-18 20:08:08

yyyy年MM月dd日 HH时mm分ss秒

2017年08月18日 20时08分08秒

yyyyMMdd

20170818

dd/MM/yyyy

18/08/2017

yyyy年M月

2017年8月

M月d日

8月18日

北京时间：HH点mm分

北京时间：20点08分

yyyy年的M月某天晚上，大概H点

2017年的8月某天晚上，大概20点

代码语言：javascript代码运行次数：0运行复制

4.1.6 value 属性类型：String，默认值：new Date()

支持传入符合format参数设定的日期格式字符，或者 new Date()

代码语言：javascript代码运行次数：0运行复制

4.1.7 min/max 属性类型：string，默认值：min: ‘1900-1-1’、max: ‘2099-12-31’

设定有限范围内的日期或时间值，不在范围内的将不可选中。这两个参数的赋值非常灵活，主要有以下几种情况：

如果值为字符类型，则：年月日必须用 -（中划线）分割、时分秒必须用 :（半角冒号）号分割。这里并非遵循 format 设定的格式

2.如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后

3.如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日代码语言：javascript代码运行次数：0运行复制

4.1.8 showBottom 属性类型：Boolean，默认值：true

如果设置 false，将不会显示控件的底部栏区域

代码语言：javascript代码运行次数：0运行复制

4.1.9 btns 属性类型：Array，默认值：[‘clear’, ‘now’, ‘confirm’]

右下角显示的按钮，会按照数组顺序排列，内置可识别的值有：clear、now、confirm

代码语言：javascript代码运行次数：0运行复制

4.1.10 calendar 属性类型：Boolean，默认值：false

我们内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示。

代码语言：javascript代码运行次数：0运行复制

4.1.11 mark 属性类型：Object，默认值：无

calendar 参数所代表的公历节日更多情况下是一个摆设。因此，我们还需要自定义标注重要日子，比如结婚纪念日？日程等？它分为以下两种：

标注

格式

说明

每年的日期

{‘0-9-18’: ‘国耻’}

0 即代表每一年

每月的日期

{‘0-0-15’: ‘中旬’}

0-0 即代表每年每月（layui 2.1.1/layDate 5.0.4 新增）

特定的日期

{‘2017-8-21’: ‘发布’)

-

可同时设定多个，如：

代码语言：javascript代码运行次数：0运行复制

4.2 分页laypagelaypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染：

快速使用

代码语言：javascript代码运行次数：0运行复制

4.2.1 基础参数参数选项

说明

类型

默认值

elem

指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: ‘id’ 注意：这里不能加 # 号 2. elem: document.getElementById(‘id’)

String/Object

-

count

数据总数。一般通过服务端得到

Number

-

limit

每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。

Number

10

limits

每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框

Array

[10, 20, 30, 40, 50]

curr

起始页。一般用于刷新类型的跳页以及HASH跳页。

Number

1

groups

连续出现的页码个数

Number

5

prev

自定义“上一页”的内容，支持传入普通文本和HTML

String

上一页

next

自定义“下一页”的内容，同上

String

下一页

first

自定义“首页”的内容，同上

String

1

last

自定义“尾页”的内容，同上

String

总页数值

layout

自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）

Array

[‘prev’, ‘page’, ‘next’]

theme

自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //将会生成 class=“layui-laypage-xxx” 的CSS类，以便自定义主题

String

-

hash

开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页

String/Boolean

false

4.3 数据表格table是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能

4.3.1 快速使用创建一个table实例最简单的方式是，在页面放置一个元素 ，然后通过 table.render() 方法指定该容器，如下所示：

代码语言：javascript代码运行次数：0运行复制

4.3.2 表格渲染三种初始化渲染方式

方式

机制

适用场景

01.

方法渲染

用JS方法的配置完成渲染

（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。

02.

自动渲染

HTML配置，自动渲染

无需写过多 JS，可专注于 HTML 表头部分

03.

转换静态表格

转化一段已有的表格元素

无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

4.3.2.1 方法渲染其实这是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器：

代码语言：javascript代码运行次数：0运行复制

事实上我们更推荐采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单，也只能由各位猿猿们自行体味了。

备注：*table.render()*方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作

4.3.2.2 自动渲染即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：

带有 class=“layui-table” 的 标签。对标签设置属性 lay-data=“” 用于配置一些基础参数在标签中设置属性*lay-data=“”*用于配置表头信息按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格。下面是一个示例：

代码语言：javascript代码运行次数：0运行复制

ID	用户名	性别	城市	签名	积分	评分	职业	财富

4.3.2.3 静态表格渲染假设你的页面已经存在了一段有内容的表格，它由原始的table标签组成，这时你需要赋予它一些动态元素，比如拖拽调整列宽？比如排序等等？那么你同样可以很轻松地去实现。如下所示：

转换后

代码语言：javascript代码运行次数：0运行复制

昵称	积分	签名
贤心1	66	人生就像是一场修行a
贤心2	88	人生就像是一场修行b
贤心3	33	人生就像是一场修行c

4.3.3 基础参数基础参数并非所有都要出现，有必选也有可选，结合你的实际需求自由设定。基础参数一般出现在以下几种场景中：

代码语言：javascript代码运行次数：0运行复制场景一：下述方法中的键值即为基础参数项

table.render({

height: 300

,url: '/api/data'

});

场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号

……

更多场景：下述 options 即为含有基础参数项的对象

> table.init('filter', options); //转化静态表格

> var tableObj = table.render({});

tableObj.reload(options); //重载表格下面是目前 table 模块所支持的全部参数一览表，我们对重点参数进行了的详细说明，你可以点击下述表格最右侧的“示例”去查看

参数

类型

说明

示例值

elem

String/DOM

指定原始 table 容器的选择器或 DOM，方法渲染方式必填

“#demo”

cols

Array

设置表头。值是一个二维数组。方法渲染方式必填

详见表头参数

url（等）

-

异步数据接口相关参数。其中 url 参数为必填项

详见异步接口

toolbar

String/DOM/Boolean

开启表格头部工具栏区域，该参数支持四种类型值：toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器toolbar: ‘ xxx ’ //直接传入工具栏模板字符toolbar: true //仅开启工具栏，不显示左侧模板toolbar: ‘default’ //让工具栏左侧显示默认的内置模板注意： 1. 该参数为 layui 2.4.0 开始新增。 2. 若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数

false

defaultToolbar

Array

该参数可自由配置头部工具栏右侧的图标按钮

详见头工具栏图标

width

Number

设定容器宽度。table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。

1000

height

Number/String

设定容器高度

详见height

cellMinWidth

Number

（layui 2.2.1 新增）全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth

100

done

Function

数据渲染完的回调。你可以借此做一些其它的操作

详见done回调

data

Array

直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。

[{}, {}, {}, {}, …]

totalRow

Boolean

是否开启合计行区域。layui 2.4.0 新增

false

page

Boolean/Object

开启分页（默认：false） 注：从 layui 2.2.0 开始，支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外）

{theme: ‘#c00’}

limit

Number

每页显示的条数（默认：10）。值务必对应 limits 参数的选项。 注意：优先级低于 page 参数中的 limit 参数

30

limits

Array

每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。 注意：优先级低于 page 参数中的 limits 参数

[30,60,90]

loading

Boolean

是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式

false

title

String

定义 table 的大标题（在文件导出等地方会用到）layui 2.4.0 新增

“用户表”

text

Object

自定义文本，如空数据时的异常提示等。注：layui 2.2.5 开始新增。

详见自定义文本

autoSort

Boolean

默认 true，即直接由 table 组件在前端自动处理排序。 若为 false，则需自主排序，通常由服务端直接返回排序好的数据。 注意：该参数为 layui 2.4.4 新增

详见监听排序

initSort

Object

初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。

详见初始排序

id

String

设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。 值得注意的是：从 layui 2.2.0 开始，该参数也可以自动从 ** 中的 id 参数中获取。

test

skin（等）

-

设定表格各种外观、尺寸等

详见表格风格

4.3.4 表头参数如果你采用的是方法渲染，cols 是一个二维数组，表头参数设定在数组内；如果你采用的自动渲染，表头参数的设定应放在th标签上

参数

类型

说明

示例值

field

String

设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识

username

title

String

设定标题名称

用户名

width

Number/String

设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比 请结合实际情况，对不同列做不同设定。

200 30%

minWidth

Number

局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth

100

type

String

设定列类型。可选值有：normal（常规列，无需设定）checkbox（复选框列）radio（单选框列，layui 2.4.0 新增）numbers（序号列）space（空列）

任意一个可选值

LAY_CHECKED

Boolean

是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。

true

fixed

String

固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。 注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。

left（同 true） right

hide

Boolean

是否初始隐藏列，默认：false。layui 2.4.0 新增

true

totalRow

Boolean/Object

是否开启该列的自动合计功能，默认：false。当开启时，则默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据，格式如下：codelayui.code{ "code": 0, "msg": "", "count": 1000, "data": [{}, {}] "totalRow": { "score": "666" ,"experience": "999" }} 如上，在 totalRow 中返回所需统计的列字段名和值即可。 另外，totalRow 字段同样可以通过 parseData 回调来解析成为 table 组件所规定的数据格式。

true

totalRowText

String

用于显示自定义的合计文本。layui 2.4.0 新增

“合计：”

sort

Boolean

是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对。比如：‘贤心’ > ‘2’ > ‘100’，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此。

true

unresize

Boolean

是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。

false

edit

String

单元格编辑类型（默认不开启）目前只支持：text（输入框）

text

event

String

自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理

任意字符

style

String

自定义单元格样式。即传入 CSS 样式

background-color: #5FB878; color: #fff;

align

String

单元格排列方式。可选值有：left（默认）、center（居中）、right（居右）

center

colspan

Number

单元格所占列数（默认：1）。一般用于多级表头

3

rowspan

Number

单元格所占行数（默认：1）。一般用于多级表头

2

templet

String

自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等

详见自定义模板

toolbar

String

绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮

详见行工具事件

代码语言：javascript代码运行次数：0运行复制//方法渲染：

table.render({

cols: [[ //标题栏

{checkbox: true}

,{field: 'id', title: 'ID', width: 80}

,{field: 'username', title: '用户名', width: 120}

]]

});

它等价于自动渲染：

	ID	用户名

4.3.5 异步数据接口数据的异步请求由以下几个参数组成：

参数名

功能

url

接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义） page 代表当前页码、limit 代表每页数据量

method

接口http请求类型，默认：get

where

接口的其它参数。如：where: {token: ‘sasasas’, id: 123}

contentType

发送到服务端的内容编码类型。如果你要发送 json 内容，可以设置：contentType: ‘application/json’

headers

接口的请求头。如：headers: {token: ‘sasasas’}

parseData

数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。table 组件默认规定的数据格式为（参考：/demo/table/user/）

代码语言：javascript代码运行次数：0运行复制很多时候，您接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：

{

"status": 0,

"message": "",

"total": 180,

"data": {

"item": [{}, {}]

}

}

那么你需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式。转换为标准格式

{

"code": 0,

"msg": "",

"count": 1000,

"data": [{}, {}]

}

------------------------------------------------------------------------------

table.render({

elem: '#demp'

,url: ''

,parseData: function(res){ //res 即为原始返回的数据

return {

"code": res.status, //解析接口状态

"msg": res.message, //解析提示文本

"count": res.total, //解析数据长度

"data": res.data.item //解析数据列表

};

}

//,…… //其他参数

});4.4 表单formlayui 针对各种表单元素做了较为全面的UI支持，你无需去书写那些 UI 结构，你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点，你必须给表单体系所在的父元素加上class=“layui-form”，一切的工作都会在你加载完form模块后，自动完成。

4.4.1 基本使用代码语言：javascript代码运行次数：0运行复制

输入框

下拉选择框

写作

阅读

复选框

开关关

开关开

单选框

请填写描述

立即提交

重置

4.4.2 更新渲染有些时候，你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制，但没有关系，你只需要执行 form.render(type, filter); 方法即可。

第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表：

参数（type）值

描述

select

刷新select选择框渲染

checkbox

刷新checkbox复选框（含开关）渲染

radio

刷新radio单选框框渲染

代码语言：javascript代码运行次数：0运行复制form.render(); //更新全部

form.render('select'); //刷新select选择框渲染第二个参数：filter，为 class=“layui-form” 所在元素的 lay-filter=“” 的值。你可以借助该参数，对表单完成局部更新。

代码语言：javascript代码运行次数：0运行复制【HTML】

【JavaScript】

form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态

form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态

//……4.4.3 预设元素属性代码语言：javascript代码运行次数：0运行复制

提交上述的lay-verify、lay-skin、lay-filter、lay-submit神马的都是我们所说的预设的元素属性，他们可以使得一些交互操作交由form模块内部、或者你来借助form提供的JS接口精确控制。目前我们可支持的属性如下表所示：

属性名

属性值

说明

title

任意字符

设定元素名称，一般用于checkbox、radio框

lay-skin

switch（开关风格） primary（原始风格）

定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式

lay-ignore

任意字符或不设值

是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格

lay-filter

任意字符

事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。

lay-verify

required（必填项） phone（手机号） email（邮箱） url（网址） number（数字） date（日期） identity（身份证） 自定义值

同时支持多条规则的验证，格式：lay-verify=“验证A|验证B” 如：lay-verify=“required|phone|number” 另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify=“pass”，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证

lay-verType

tips（吸附层） alert（对话框） msg（默认）

用于定义异常提示层模式。

lay-reqText

任意字符

用于自定义必填项（即设定了 lay-verify=“required” 的表单）的提示文本 注意：该功能为 layui 2.5.0 新增

lay-submit

无需填写值

绑定触发提交的元素，如button

4.4.4 事件监听语法：form.on(‘event(过滤器值)’, callback);

form模块在 layui 事件机制中注册了专属事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用form名。form支持的事件如下：

event

描述

select

监听select下拉选择事件

checkbox

监听checkbox复选框勾选事件

switch

监听checkbox复选框开关事件

radio

监听radio单选框事件

submit

监听表单提交事件

默认情况下，事件所监听的是全部的form模块元素，但如果你只想监听某一个元素，使用事件过滤器即可。如：

代码语言：javascript代码运行次数：0运行复制form.on('select(test)', function(data){

console.log(data);

});4.4.4.1 监听select选择下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：

代码语言：javascript代码运行次数：0运行复制form.on('select(filter)', function(data){

console.log(data.elem); //得到select原始DOM对象

console.log(data.value); //得到被选中的值

console.log(data.othis); //得到美化后的DOM对象

});注意：如果你想监听所有的select，去掉过滤器*(filter)*即可。

4.4.4.2 监听checkbox复选复选框点击勾选时触发，回调函数返回一个object参数，携带两个成员：

代码语言：javascript代码运行次数：0运行复制form.on('checkbox(filter)', function(data){

console.log(data.elem); //得到checkbox原始DOM对象

console.log(data.elem.checked); //是否被选中，true或者false

console.log(data.value); //复选框value值，也可以通过data.elem.value得到

console.log(data.othis); //得到美化后的DOM对象

});4.4.4.3 监听switch开关开关被点击时触发，回调函数返回一个object参数，携带两个成员：

代码语言：javascript代码运行次数：0运行复制form.on('switch(filter)', function(data){

console.log(data.elem); //得到checkbox原始DOM对象

console.log(data.elem.checked); //开关是否开启，true或者false

console.log(data.value); //开关value值，也可以通过data.elem.value得到

console.log(data.othis); //得到美化后的DOM对象

});4.4.4.4 监听radio单选radio单选框被点击时触发，回调函数返回一个object参数，携带两个成员：

代码语言：javascript代码运行次数：0运行复制form.on('radio(filter)', function(data){

console.log(data.elem); //得到radio原始DOM对象

console.log(data.value); //被点击的radio的value值

});4.4.4.5 监听submit提交按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：

代码语言：javascript代码运行次数：0运行复制form.on('submit(*)', function(data){

console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象

console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回

console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

});**注意：**上述的*submit(*)*中的 * 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如：

代码语言：javascript代码运行次数：0运行复制提交你可以把*号换成任意的值，如：*lay-filter=“go”，但监听事件时也要改成 form.on(‘submit(go)’, callback);

4.4.5 表单赋值 / 取值语法：form.val(‘filter’, object);

用于给指定表单集合的元素赋值和取值。如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值。

代码语言：javascript代码运行次数：0运行复制//给表单赋值

form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值

"username": "贤心" // "name": "value"

,"sex": "女"

,"auth": 3

,"check[write]": true

,"open": false

,"desc": "我爱layui"

});

//获取表单区域所有值

var data1 = form.val("formTest");第二个参数中的键值是表单元素对应的 name 和 value。

4.4.6 表单验证只需要在表单元素上加上 lay-verify=“” 属性值即可。如：

代码语言：javascript代码运行次数：0运行复制

还同时支持多条规则的验证，如下：

也可以自定义复杂校验

代码语言：javascript代码运行次数：0运行复制form.verify({

username: function(value, item){ //value：表单的值、item：表单的DOM对象

if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){

return '用户名不能有特殊字符';

}

if(/(^\_)|(\__)|(\_+$)/.test(value)){

return '用户名首尾不能出现下划线\'_\'';

}

if(/^\d+\d+\d$/.test(value)){

return '用户名不能全为数字';

}

//如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）

if(value === 'xxx'){

alert('用户名不能为敏感词');

return true;

}

}

//我们既支持上述函数式的方式，也支持下述数组的形式

//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]

,pass: [

/^[\S]{6,12}$/

,'密码必须6到12位，且不能出现空格'

]

});当你自定义了类似上面的验证规则后，你只需要把 key 赋值给输入框的 lay-verify 属性即可：

代码语言：javascript代码运行次数：0运行复制

4.5 穿梭框transfer4.5.1 快速使用代码语言：javascript代码运行次数：0运行复制

4.5.2 基础参数参数选项

说明

类型

默认值

elem

指向容器选择器

String/Object

-

title

穿梭框上方标题

Array

[‘标题一’, ‘标题二’]

data

数据源

Array

[{}, {}, …]

parseData

用于对数据源进行格式解析

Function

详见数据源格式解析

value

初始选中的数据（右侧列表）

Array

-

id

设定实例唯一索引，用于基础方法传参使用。

String

-

showSearch

是否开启搜索

Boolean

false

width

定义左右穿梭框宽度

Number

200

height

定义左右穿梭框高度

Number

340

text

自定义文本，如空数据时的异常提示等。text: { none: ‘无数据’ //没有数据时的文案 ,searchNone: ‘无匹配数据’ //搜索无匹配数据时的文案} `

Object

-

onchange

左右数据穿梭时的回调

Function

详见穿梭时的回调

4.5.3 数据源格式解析数据格式解析的回调函数，用于将任意数据格式解析成 transfer 组件规定的数据格式，以下是合法的数据格式如下：

合法的数据格式

代码语言：javascript代码运行次数：0运行复制[

{"value": "1", "title": "李白", "disabled": "", "checked": ""}

,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}

,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}

]不符合规范的数据格式

代码语言：javascript代码运行次数：0运行复制[

{"id": "1", "name": "李白"}

,{"id": "2", "name": "杜甫"}

,{"id": "3", "name": "贤心"}

]需要将其解析成 transfer 组件所规定的数据格式：

代码语言：javascript代码运行次数：0运行复制transfer.render({

elem: '#text1'

,data: [

{"id": "1", "name": "李白"}

,{"id": "2", "name": "杜甫"}

,{"id": "3", "name": "贤心"}

]

,parseData: function(res){

return {

"value": res.id //数据值

,"title": res.name //数据标题

,"disabled": res.disabled //是否禁用

,"checked": res.checked //是否选中

}

}

});4.5.4 获得右侧数据穿梭框的右侧数据通常被认为是选中数据，因此你需要得到它并提交到后台

代码语言：javascript代码运行次数：0运行复制transfer.render({

elem: '#test'

,data: []

,id: 'demo1' //定义索引

});

//获得右侧数据

var getData = transfer.getData('demo1');4.6 轮播图carouselcarousel 是 layui 2.0 版本中新增的全新模块，主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何类型内容的轮播式切换操作，更可以胜任 FullPage （全屏上下轮播）的需求，简洁而不失强劲，灵活而优雅。

4.6.1 快速使用代码语言：javascript代码运行次数：0运行复制

在HTML结构中，只需要简单地注意这两项：

外层元素的 class=“layui-carousel” 用来标识为一个轮播容器内层元素的属性 carousel-item 用来标识条目而 id 则用于carousel模块建造实例的元素指向，剩下的工作，就是按照你的实际需求，给方法设置不同的基础参数了。

4.6.2 基础参数通过核心方法：carousel.render(options) 来对轮播设置基础参数，也可以通过方法：carousel.set(options) 来设定全局基础参数.

可选项

说明

类型

默认值

elem

指向容器选择器，如：elem: ‘#id’。也可以是DOM对象

string/object

无

width

设定轮播容器宽度，支持像素和百分比

string

‘600px’

height

设定轮播容器高度，支持像素和百分比

string

‘280px’

full

是否全屏轮播

boolean

false

anim

轮播切换动画方式，可选值为：default（左右切换）updown（上下切换）fade（渐隐渐显切换）

string

‘default’

autoplay

是否自动切换

boolean

true

interval

自动切换的时间间隔，单位：ms（毫秒），不能低于800

number

3000

index

初始开始的条目索引

number

0

arrow

切换箭头默认显示状态，可选值为：hover（悬停显示）always（始终显示）none（始终不显示）

string

‘hover’

indicator

指示器位置，可选值为：inside（容器内部）outside（容器外部）none（不显示） 注意：如果设定了 anim:‘updown’，该参数将无效

string

‘inside’

trigger

指示器的触发事件

string

‘click’

4.6.3 切换事件轮播的每一次切换时触发，回调函数返回一个object参数，携带的成员如下：

代码语言：javascript代码运行次数：0运行复制var carousel = layui.carousel;

//监听轮播切换事件

carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值

console.log(obj.index); //当前条目的索引

console.log(obj.prevIndex); //上一个条目的索引

console.log(obj.item); //当前条目的元素对象

});4.6.4 重置轮播在执行 carousel.render(options) 方法时，有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法。

代码语言：javascript代码运行次数：0运行复制var ins = carousel.render(options);

//重置轮播

ins.reload(options);1">

条目1

条目2

条目3

条目4

条目5

```

在HTML结构中，只需要简单地注意这两项：

外层元素的 class=“layui-carousel” 用来标识为一个轮播容器内层元素的属性 carousel-item 用来标识条目而 id 则用于carousel模块建造实例的元素指向，剩下的工作，就是按照你的实际需求，给方法设置不同的基础参数了。

4.6.2 基础参数通过核心方法：carousel.render(options) 来对轮播设置基础参数，也可以通过方法：carousel.set(options) 来设定全局基础参数.

可选项

说明

类型

默认值

elem

指向容器选择器，如：elem: ‘#id’。也可以是DOM对象

string/object

无

width

设定轮播容器宽度，支持像素和百分比

string

‘600px’

height

设定轮播容器高度，支持像素和百分比

string

‘280px’

full

是否全屏轮播

boolean

false

anim

轮播切换动画方式，可选值为：default（左右切换）updown（上下切换）fade（渐隐渐显切换）

string

‘default’

autoplay

是否自动切换

boolean

true

interval

自动切换的时间间隔，单位：ms（毫秒），不能低于800

number

3000

index

初始开始的条目索引

number

0

arrow

切换箭头默认显示状态，可选值为：hover（悬停显示）always（始终显示）none（始终不显示）

string

‘hover’

indicator

指示器位置，可选值为：inside（容器内部）outside（容器外部）none（不显示） 注意：如果设定了 anim:‘updown’，该参数将无效

string

‘inside’

trigger

指示器的触发事件

string

‘click’

4.6.3 切换事件轮播的每一次切换时触发，回调函数返回一个object参数，携带的成员如下：

代码语言：javascript代码运行次数：0运行复制var carousel = layui.carousel;

//监听轮播切换事件

carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值

console.log(obj.index); //当前条目的索引

console.log(obj.prevIndex); //上一个条目的索引

console.log(obj.item); //当前条目的元素对象

});4.6.4 重置轮播在执行 carousel.render(options) 方法时，有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法。

代码语言：javascript代码运行次数：0运行复制var ins = carousel.render(options);

//重置轮播

ins.reload(options);