amis Slider 左右滑动容器组件JSON 配置、事件监听与源码原理详解【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis导读本文围绕 amis 前端低代码框架中的slider组件左右滑动容器展开该组件主要面向移动端让用户通过左右滑动在“主体内容 / 左侧内容 / 右侧内容”之间切换展示更多操作区在桌面端pc下则把左右内容直接平铺展示在主体两侧。读完本文你将掌握slider的完整 JSON 配置写法、body / left / right / bodyWidth各属性的作用与默认值、leftShow / leftHide / rightShow / rightHide四个事件的使用方式并能结合源码理解它在移动端与桌面端完全不同的渲染与交互机制。一、组件定位移动端滑动、桌面端平铺slider是 amis 内置的布局型容器组件与输入控件input-slider数值滑块是两回事。它的设计目标非常明确在移动端支持左右滑动展示更多内容在桌面端则将更多内容直接展示在右侧。这一“移动端滑动、桌面端平铺”的双模式行为在底层 UI 实现 packages/amis-ui/src/components/Slider.tsx 中有清晰的对应逻辑组件根据mobileUI标志渲染完全不同的两套 DOM 结构详见本文第四节。注册层面amis 通过装饰器把slider注册为渲染器渲染器实现位于 packages/amis/src/renderers/Slider.tsx其AMISSliderSchema类型定义同文件第 15~28 行明确声明了type: slider以及body、left、right、bodyWidth四个配置项与官方文档中的属性表一一对应。二、基本用法完整的可运行 JSON 示例slider的基本用法是在列表中为每一项渲染一个可左右滑动的容器。以下是文档中的完整示例已可直接粘贴到 amis 编辑器或页面 schema 中运行{ type: page, body: { type: service, api: /api/mock2/sample?perPage5, body: [ { type: list, source: $rows, listItem: { body: [ { type: slider, body: [ { type: container, body: { type: tpl, tpl: Engine: ${engine} } } ], left: [ { type: button, level: primary, label: 详情, actionType: dialog, dialog: { title: 查看详情, body: { type: form, body: [ { label: Engine, name: engine, type: static }, { name: version, label: Version, type: static } ] } } } ], right: [ { type: button, level: danger, label: 删除 } ] } ] } } ] } }对示例的拆解最外层service请求/api/mock2/sample?perPage5拉取示例数据得到rows数组list通过source: $rows循环渲染列表项每个listItem的body中放一个slider容器body主体内容这里用container包住一个tpl模板展示Engine: ${engine}left左侧内容这里放一个主色“详情”按钮点击后通过actionType: dialog弹出查看详情的对话框内含engine、version两个只读字段right右侧内容这里放一个危险色“删除”按钮。这样用户在移动端横向滑动列表项即可从主体滑出左侧“详情”操作区或右侧“删除”操作区交互方式贴近 iOS 风格的列表滑动操作。三、属性表四个配置项逐一说明slider的配置属性集中在 docs/zh-CN/components/slider.md 的属性表中共四个属性名类型默认值说明typestringslider指定为滑动条渲染器固定值bodySchemaNode—容器主要内容rightSchemaNode—容器右侧内容在 pc 下展示在右侧leftSchemaNode—容器左侧内容在 pc 下展示在右侧bodyWidthstring60%pc 下 body 即移动端默认宽度占比默认 60%逐项深入说明type必须固定为slider对应渲染器注册名。从源码看packages/amis/src/renderers/Slider.tsx 中Renderer({ type: slider })完成注册schema 中写type: slider即可命中该渲染器。body容器主体内容类型为 SchemaNode。SchemaNode 是 amis 中每一个配置节点的统称支持三种形态模板字符串如Hello ${text}!、单个 Schema 配置必须含type字段、以及 Schema 配置数组——因此body里可以直接放container、tpl、button、form等任意组件。在渲染器实现中body通过render(body, body, {...rest.data})渲染并且自动带上当前作用域数据见 packages/amis/src/renderers/Slider.tsx所以主体里的tpl能直接取到${engine}等数据。left/right左右两侧内容同为 SchemaNode。注意文档属性表中left的说明写的是“在 pc 下展示在右侧”这是文档对桌面端布局的描述pc 下左右内容都平铺在主体右侧区域源码中桌面端渲染顺序为 body → left → right且左右两侧都进入独立的容器见本文第四节。bodyWidthstring类型默认60%。它有两层含义桌面端决定body占容器宽度的百分比左右两侧平分剩余(100 - bodyWidth)的宽度通过flex: 1平分移动端决定滑动展开后左右两侧内容各占的最大宽度——两侧各自最多占(100 - bodyWidth) / 2。这个“两侧最大宽度”的计算在 packages/amis-ui/src/components/Slider.tsx 中const leftRightDefaultWidth useMemo( () (100 - parseInt(bodyWidth || 60)) / 2, [bodyWidth] );例如保持默认60%时左右两侧展开后各占20%若设为80%则两侧各占10%主体更宽。四、双模式渲染与滑动交互的源码原理slider的底层 UI 组件实现在 packages/amis-ui/src/components/Slider.tsx其核心是根据mobileUI标志渲染两套结构。4.1 桌面端静态平铺当mobileUI为 false 时桌面端渲染结果直接是三个静态区域div className{cx(Slider-BodyContainer)} style{{ width: bodyWidth ? bodyWidth : 60% }} {props.body} /div {props.left div className{cx(Slider-LeftContainer)}{props.left}/div} {props.right div className{cx(Slider-RightContainer)}{props.right}/div}主体宽度即bodyWidth默认 60%左右内容紧随其后平铺展示无需任何滑动交互。这正是文档所说“桌面端中更多内容展示在右侧”。对应的样式在 packages/amis-ui/scss/components/_slider.scss.#{$ns}Slider { display: flex; -BodyContainer { width: 60%; } -LeftContainer, -RightContainer { flex: 1; } }容器是 flex 布局主体固定60%宽度左右内容flex: 1平分剩余空间。4.2 移动端滑动展开当mobileUI为 true 时移动端渲染顺序变为left → body → right三段式结构左右两侧默认宽度为0并绑定鼠标 / 触摸事件div className{cx(Slider-LeftContainer)} ref{leftRef} style{{ width: showLeft ? leftRightDefaultWidth % : 0% }} {props.left} /div div className{cx(Slider-BodyContainer)} onMouseDown{handleStart} onMouseMove{handleMove} onTouchStart{handleStart} onTouchMove{handleMove} {props.body} /div div className{cx(Slider-RightContainer)} ref{rightRef} style{{ width: showRight ? leftRightDefaultWidth % : 0% }} {props.right} /div移动端的样式在 packages/amis-ui/scss/components/_slider.scss 的媒体查询中左右容器width: 0、overflow: hidden并有transition: width 0.3s的过渡动画因此滑动展开 / 收起是平滑的。滑动交互的核心逻辑handleStart在主体区域按下mousedown/touchstart时记录起始坐标startX并挂载mouseup/touchend监听handleMove根据当前 X 坐标与startX的差值判断滑动方向——向左滑currentX startX则右侧内容逐步展开、左侧收起向右滑则反之。每次移动以±1%的粒度更新左右容器宽度并限制在leftRightDefaultWidth即(100 - bodyWidth) / 2以内handleUp松手时若位移超过 10px 视为一次有效滑动则把滑动方向对应一侧的宽度设为最大值另一侧归零完成展开 / 切换。4.3 点击外部自动收起组件还通过useClickAway实现了“点击滑动条外部自动重置”的能力见 packages/amis-ui/src/components/Slider.tsx当点击发生在sliderRef容器之外且当前有内容处于展开状态时调用setWidth(0, 0)把左右两侧全部收起。五、事件表监听滑动状态的四个事件事件能力自 amis2.6.1 及以上版本提供。slider会对外派发四个事件可通过onEvent监听并用actions配置响应动作事件动作机制的完整说明见 事件动作事件名称事件参数说明leftShowlabel: string鼠标事件对象左侧内容出现时触发leftHidelabel: string鼠标事件对象左侧内容隐藏时触发rightShowlabel: string鼠标事件对象右侧内容出现时触发rightHidelabel: string鼠标事件对象右侧内容隐藏时触发事件派发的底层链路渲染器 packages/amis/src/renderers/Slider.tsx 中定义了handleLeftShow / handleRightShow / handleLeftHide / handleRightHide四个方法内部统一调用this.props.dispatchEvent(leftShow, this.props.data)等派发事件携带当前组件数据这些方法通过 props 传入底层 UI 组件而 UI 组件 packages/amis-ui/src/components/Slider.tsx 在setWidth中根据左右宽度是否到达 0 或最大值来决定触发 Show / Hide 回调从而驱动上层事件派发。一个典型的使用场景是在移动端用户向左滑出右侧“删除”按钮时监听rightShow事件触发toast提示“可进行删除操作”在leftShow时通过dialog动作自动弹出详情。配置示例{ type: slider, body: { type: tpl, tpl: Engine: ${engine} }, left: [{ type: button, label: 详情 }], right: [{ type: button, label: 删除 }], onEvent: { rightShow: { actions: [{ actionType: toast, args: { msg: 已滑出删除区域 } }] }, leftShow: { actions: [ { actionType: dialog, args: { title: 查看详情, body: { type: tpl, tpl: ${engine} } } } ] } } }六、实战要点与注意事项区分两个同名组件slider左右滑动容器本文主题与表单控件input-slider数值范围滑块是完全不同的两个组件前者注册类型为slider后者为input-slider不要在表单中误用。bodyWidth的双重语义桌面端它决定主体宽度占比移动端它决定左右内容展开后的最大宽度(100 - bodyWidth) / 2。需要更宽的侧滑操作区时可适当调小bodyWidth。事件参数的说明事件表中label: string 鼠标事件对象描述的是事件可携带的参数渲染器实际以组件当前数据props.data作为派发参数在onEvent的 action 中可通过事件参数对象读取相关数据。事件版本限制四个滑动事件依赖 amis 2.6.1 的dispatchEvent事件动作体系低版本无法使用若项目版本较旧请先升级。移动端交互约束滑动展开仅在mobileUI移动端模式且当前左右两侧均未展开时启用展开状态下再次滑动会受限于最大宽度点击组件外部区域会自动收起符合移动端操作习惯。样式定制组件样式集中在 packages/amis-ui/scss/components/_slider.scss如需调整展开动画时长默认0.3s、两侧宽度分配等可基于 amis 的主题变量机制覆盖。七、参考资料组件文档docs/zh-CN/components/slider.md渲染器实现packages/amis/src/renderers/Slider.tsxUI 组件实现packages/amis-ui/src/components/Slider.tsx组件样式packages/amis-ui/scss/components/_slider.scssSchemaNode 类型说明docs/zh-CN/types/schemanode.md事件动作机制docs/zh-CN/concepts/event-action.md【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
amis Slider 左右滑动容器组件：JSON 配置、事件监听与源码原理详解
amis Slider 左右滑动容器组件JSON 配置、事件监听与源码原理详解【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis导读本文围绕 amis 前端低代码框架中的slider组件左右滑动容器展开该组件主要面向移动端让用户通过左右滑动在“主体内容 / 左侧内容 / 右侧内容”之间切换展示更多操作区在桌面端pc下则把左右内容直接平铺展示在主体两侧。读完本文你将掌握slider的完整 JSON 配置写法、body / left / right / bodyWidth各属性的作用与默认值、leftShow / leftHide / rightShow / rightHide四个事件的使用方式并能结合源码理解它在移动端与桌面端完全不同的渲染与交互机制。一、组件定位移动端滑动、桌面端平铺slider是 amis 内置的布局型容器组件与输入控件input-slider数值滑块是两回事。它的设计目标非常明确在移动端支持左右滑动展示更多内容在桌面端则将更多内容直接展示在右侧。这一“移动端滑动、桌面端平铺”的双模式行为在底层 UI 实现 packages/amis-ui/src/components/Slider.tsx 中有清晰的对应逻辑组件根据mobileUI标志渲染完全不同的两套 DOM 结构详见本文第四节。注册层面amis 通过装饰器把slider注册为渲染器渲染器实现位于 packages/amis/src/renderers/Slider.tsx其AMISSliderSchema类型定义同文件第 15~28 行明确声明了type: slider以及body、left、right、bodyWidth四个配置项与官方文档中的属性表一一对应。二、基本用法完整的可运行 JSON 示例slider的基本用法是在列表中为每一项渲染一个可左右滑动的容器。以下是文档中的完整示例已可直接粘贴到 amis 编辑器或页面 schema 中运行{ type: page, body: { type: service, api: /api/mock2/sample?perPage5, body: [ { type: list, source: $rows, listItem: { body: [ { type: slider, body: [ { type: container, body: { type: tpl, tpl: Engine: ${engine} } } ], left: [ { type: button, level: primary, label: 详情, actionType: dialog, dialog: { title: 查看详情, body: { type: form, body: [ { label: Engine, name: engine, type: static }, { name: version, label: Version, type: static } ] } } } ], right: [ { type: button, level: danger, label: 删除 } ] } ] } } ] } }对示例的拆解最外层service请求/api/mock2/sample?perPage5拉取示例数据得到rows数组list通过source: $rows循环渲染列表项每个listItem的body中放一个slider容器body主体内容这里用container包住一个tpl模板展示Engine: ${engine}left左侧内容这里放一个主色“详情”按钮点击后通过actionType: dialog弹出查看详情的对话框内含engine、version两个只读字段right右侧内容这里放一个危险色“删除”按钮。这样用户在移动端横向滑动列表项即可从主体滑出左侧“详情”操作区或右侧“删除”操作区交互方式贴近 iOS 风格的列表滑动操作。三、属性表四个配置项逐一说明slider的配置属性集中在 docs/zh-CN/components/slider.md 的属性表中共四个属性名类型默认值说明typestringslider指定为滑动条渲染器固定值bodySchemaNode—容器主要内容rightSchemaNode—容器右侧内容在 pc 下展示在右侧leftSchemaNode—容器左侧内容在 pc 下展示在右侧bodyWidthstring60%pc 下 body 即移动端默认宽度占比默认 60%逐项深入说明type必须固定为slider对应渲染器注册名。从源码看packages/amis/src/renderers/Slider.tsx 中Renderer({ type: slider })完成注册schema 中写type: slider即可命中该渲染器。body容器主体内容类型为 SchemaNode。SchemaNode 是 amis 中每一个配置节点的统称支持三种形态模板字符串如Hello ${text}!、单个 Schema 配置必须含type字段、以及 Schema 配置数组——因此body里可以直接放container、tpl、button、form等任意组件。在渲染器实现中body通过render(body, body, {...rest.data})渲染并且自动带上当前作用域数据见 packages/amis/src/renderers/Slider.tsx所以主体里的tpl能直接取到${engine}等数据。left/right左右两侧内容同为 SchemaNode。注意文档属性表中left的说明写的是“在 pc 下展示在右侧”这是文档对桌面端布局的描述pc 下左右内容都平铺在主体右侧区域源码中桌面端渲染顺序为 body → left → right且左右两侧都进入独立的容器见本文第四节。bodyWidthstring类型默认60%。它有两层含义桌面端决定body占容器宽度的百分比左右两侧平分剩余(100 - bodyWidth)的宽度通过flex: 1平分移动端决定滑动展开后左右两侧内容各占的最大宽度——两侧各自最多占(100 - bodyWidth) / 2。这个“两侧最大宽度”的计算在 packages/amis-ui/src/components/Slider.tsx 中const leftRightDefaultWidth useMemo( () (100 - parseInt(bodyWidth || 60)) / 2, [bodyWidth] );例如保持默认60%时左右两侧展开后各占20%若设为80%则两侧各占10%主体更宽。四、双模式渲染与滑动交互的源码原理slider的底层 UI 组件实现在 packages/amis-ui/src/components/Slider.tsx其核心是根据mobileUI标志渲染两套结构。4.1 桌面端静态平铺当mobileUI为 false 时桌面端渲染结果直接是三个静态区域div className{cx(Slider-BodyContainer)} style{{ width: bodyWidth ? bodyWidth : 60% }} {props.body} /div {props.left div className{cx(Slider-LeftContainer)}{props.left}/div} {props.right div className{cx(Slider-RightContainer)}{props.right}/div}主体宽度即bodyWidth默认 60%左右内容紧随其后平铺展示无需任何滑动交互。这正是文档所说“桌面端中更多内容展示在右侧”。对应的样式在 packages/amis-ui/scss/components/_slider.scss.#{$ns}Slider { display: flex; -BodyContainer { width: 60%; } -LeftContainer, -RightContainer { flex: 1; } }容器是 flex 布局主体固定60%宽度左右内容flex: 1平分剩余空间。4.2 移动端滑动展开当mobileUI为 true 时移动端渲染顺序变为left → body → right三段式结构左右两侧默认宽度为0并绑定鼠标 / 触摸事件div className{cx(Slider-LeftContainer)} ref{leftRef} style{{ width: showLeft ? leftRightDefaultWidth % : 0% }} {props.left} /div div className{cx(Slider-BodyContainer)} onMouseDown{handleStart} onMouseMove{handleMove} onTouchStart{handleStart} onTouchMove{handleMove} {props.body} /div div className{cx(Slider-RightContainer)} ref{rightRef} style{{ width: showRight ? leftRightDefaultWidth % : 0% }} {props.right} /div移动端的样式在 packages/amis-ui/scss/components/_slider.scss 的媒体查询中左右容器width: 0、overflow: hidden并有transition: width 0.3s的过渡动画因此滑动展开 / 收起是平滑的。滑动交互的核心逻辑handleStart在主体区域按下mousedown/touchstart时记录起始坐标startX并挂载mouseup/touchend监听handleMove根据当前 X 坐标与startX的差值判断滑动方向——向左滑currentX startX则右侧内容逐步展开、左侧收起向右滑则反之。每次移动以±1%的粒度更新左右容器宽度并限制在leftRightDefaultWidth即(100 - bodyWidth) / 2以内handleUp松手时若位移超过 10px 视为一次有效滑动则把滑动方向对应一侧的宽度设为最大值另一侧归零完成展开 / 切换。4.3 点击外部自动收起组件还通过useClickAway实现了“点击滑动条外部自动重置”的能力见 packages/amis-ui/src/components/Slider.tsx当点击发生在sliderRef容器之外且当前有内容处于展开状态时调用setWidth(0, 0)把左右两侧全部收起。五、事件表监听滑动状态的四个事件事件能力自 amis2.6.1 及以上版本提供。slider会对外派发四个事件可通过onEvent监听并用actions配置响应动作事件动作机制的完整说明见 事件动作事件名称事件参数说明leftShowlabel: string鼠标事件对象左侧内容出现时触发leftHidelabel: string鼠标事件对象左侧内容隐藏时触发rightShowlabel: string鼠标事件对象右侧内容出现时触发rightHidelabel: string鼠标事件对象右侧内容隐藏时触发事件派发的底层链路渲染器 packages/amis/src/renderers/Slider.tsx 中定义了handleLeftShow / handleRightShow / handleLeftHide / handleRightHide四个方法内部统一调用this.props.dispatchEvent(leftShow, this.props.data)等派发事件携带当前组件数据这些方法通过 props 传入底层 UI 组件而 UI 组件 packages/amis-ui/src/components/Slider.tsx 在setWidth中根据左右宽度是否到达 0 或最大值来决定触发 Show / Hide 回调从而驱动上层事件派发。一个典型的使用场景是在移动端用户向左滑出右侧“删除”按钮时监听rightShow事件触发toast提示“可进行删除操作”在leftShow时通过dialog动作自动弹出详情。配置示例{ type: slider, body: { type: tpl, tpl: Engine: ${engine} }, left: [{ type: button, label: 详情 }], right: [{ type: button, label: 删除 }], onEvent: { rightShow: { actions: [{ actionType: toast, args: { msg: 已滑出删除区域 } }] }, leftShow: { actions: [ { actionType: dialog, args: { title: 查看详情, body: { type: tpl, tpl: ${engine} } } } ] } } }六、实战要点与注意事项区分两个同名组件slider左右滑动容器本文主题与表单控件input-slider数值范围滑块是完全不同的两个组件前者注册类型为slider后者为input-slider不要在表单中误用。bodyWidth的双重语义桌面端它决定主体宽度占比移动端它决定左右内容展开后的最大宽度(100 - bodyWidth) / 2。需要更宽的侧滑操作区时可适当调小bodyWidth。事件参数的说明事件表中label: string 鼠标事件对象描述的是事件可携带的参数渲染器实际以组件当前数据props.data作为派发参数在onEvent的 action 中可通过事件参数对象读取相关数据。事件版本限制四个滑动事件依赖 amis 2.6.1 的dispatchEvent事件动作体系低版本无法使用若项目版本较旧请先升级。移动端交互约束滑动展开仅在mobileUI移动端模式且当前左右两侧均未展开时启用展开状态下再次滑动会受限于最大宽度点击组件外部区域会自动收起符合移动端操作习惯。样式定制组件样式集中在 packages/amis-ui/scss/components/_slider.scss如需调整展开动画时长默认0.3s、两侧宽度分配等可基于 amis 的主题变量机制覆盖。七、参考资料组件文档docs/zh-CN/components/slider.md渲染器实现packages/amis/src/renderers/Slider.tsxUI 组件实现packages/amis-ui/src/components/Slider.tsx组件样式packages/amis-ui/scss/components/_slider.scssSchemaNode 类型说明docs/zh-CN/types/schemanode.md事件动作机制docs/zh-CN/concepts/event-action.md【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
