VisualHMI - 滑动画面控件

什么是滑动画面控件？

滑动画面控件是一种支持多画面横向或纵向滑动切换的容器型交互组件。用户可在主画面中定义一个矩形视窗区域，并在该区域内通过手指滑动手势，流畅地左右或上下切换一组预设的画面（如画面 A、B、C……），实现类似智能手机桌面或应用分页的视觉与操作体验。

✅ 核心功能如下：

1. 任意画面集合绑定
   • 支持将多个 画面集合，按照画面集合顺序滑动，如｛18，7，66，8｝
2. 方向灵活配置
   • 可选择 水平滑动（左右切换，适用于模式/页面轮换）或 垂直滑动（上下切换，适用于长流程分步引导）；
3. 视窗化显示机制
   • 在主画面中划定一个固定尺寸的嵌入窗口；

适用范围：VisualHMI - HMI&M系列&Dx系列

例程下载链接：VisualHMI - 滑动画面控件(点击下载)

注意

在设计页面上，建议不要把有滑动操作的控件，布局在滑动窗口范围内。以滑块为例，若【滑块控件】的滑动方向和【滑动画面控件】的滑动方向一样，会优先响应控件操作，不执行页面滑动，如下所示

相关按钮触发逻辑，执行时机选择“松开时”触发，以位状态指示灯-切换开关为例，如下所示：

1.滑动画面控件属性介绍

1.1.功能设置

滑动画面控件属性如下所示：

1. 滑动范围：设置滑动画面的范围，可设置为固定或、动态任或任意；

   • 固定:固定范围内滑动

     • 开始画面：控件滑动的开始画面；

     • 结束画面：控件滑动的结束画面；

       

   • 动态：可设置连续的画面范围内滑动，如画面5~7，8~11

     • 开始画面：控件滑动的开始画面；

     • 结束画面：控件滑动的结束画面；

       

   • 任意：任意画面集合内滑动，如｛13,16,15,14｝、｛14,13,16,15｝

     • 开始画面：控件滑动的开始画面；

     • 画面集合：填画面ID集合，用“;”隔开；

       

[!note|tip:注意] 开始画面必须在画面滑动集合，否则无法滑动

集合内的画面ID不能重复

设置的滑动画面数量不能大于集合内设置的画面数量

• 滑动方向：可设置为左右或上下滑动；

• 循环滑动：滑动到结束画面后是否可以继续滑动到开始画面；

• 滑行时间：触摸松开后，自动滑行的时间，单位毫秒。

1. 读写地址：当设置为动态滑动范围时，绑定的地址表示当前滑动控件显示的画面ID

2.应用

2.1.固定范围

2.1.1.工程配置

在画面中添加一个【滑动画面】控件，配置如下所示：

1. 滑动范围：固定，共3个画面

   • 开始画面：2_固定范围1；

   • 结束画面：4_固定范围3；

   • 滑动方向：左右

2. 读写地址：LW8000

在画面中添加一个【多状态指示灯】控件，用于左导航点演示，配置如下所示：

1. 读取地址：LW8000，和【滑动画面】控件配置的读写地址一致
2. 状态数：3
   • 状态转换表：2;3;4;对应滑动画面2~4

2.1.2.运行预览

运行虚拟屏，滑动画面，导航栏随着变化，且滑动限制开始结束页，如下所示：

2.2.动态范围

2.2.1.工程配置

在画面中添加一个【滑动画面】控件，用于演示动态修改滑动画面的滑动范围，配置如下所示：

1. 滑动范围：动态

   • 开始画面：5_动态范围1；
   • 结束画面：7_动态范围3；
   • 滑动方向：上下
   • 循环：√

2. 读写地址：LW8100；(LW8100:当前画面，LW8101:开始画面，LW8102:结束画面)

在画面中添加一个【位状态指示灯】控件，用于修改【滑动画面】控件的滑动范围。当LWF000=0，滑动范围为“动态范围1-1”~“动态范围1-3”；当LWF000=1，滑动范围为“动态范围2-1”~“动态范围2-4”；配置如下所示：

1. 读取地址：LWF000
2. 切换开关：√
3. 开关类型：切换开关
4. 使用图库：是
5. 使用文字：是

修改滑动范围:本历程通过LUA脚本修改，也可以通过PLC发送指令修改寄存器的值，LUA程序如下所示：

function on_update(slave,vtype,addr)
    if vtype == VT_LW
    then
        if addr == 0xF000
        then
            local key = get_uint16(VT_LW, 0xF000)
            if key == 0
            then
                set_uint16(VT_LW, 0x8100, 5) --当前页面
                set_uint16(VT_LW, 0x8101, 5) --开始画面
                set_uint16(VT_LW, 0x8102, 7) --结束画面
            elseif key == 1
            then
                set_uint16(VT_LW, 0x8100, 8) --当前页面
                set_uint16(VT_LW, 0x8101, 8) --开始画面
                set_uint16(VT_LW, 0x8102, 11)--结束画面
            end
        end
    end
end

在画面中添加两个【多状态指示灯】控件，一个用来是显示动态范围-1的导航栏，另一个用来显示动态范围-2的导航栏

【多状态指示灯】控件“范围1”的属性配置如下所示:

1. 读取地址：LW8100，和【滑动画面】控件配置的读写地址一致

2. 状态数：3

   • 状态转换表：5;6;7;对应滑动画面5~7

3. 控件权限：√

   • 条件地址：LWF000

   • 比较：==

   • 值：0

【多状态指示灯】控件“范围2”的属性配置如下所示:

1. 读取地址：LW8100，和【滑动画面】控件配置的读写地址一致

2. 状态数：4

   • 状态转换表：8;9;10;11；对应滑动画面8~11

3. 控件权限：√

   • 条件地址：LWF000

   • 比较：==

   • 值：1

2.2.2.运行预览

运行虚拟屏，点击"动态范围-x"按钮，显示不同的内容和滑动范围，且可以循环滑动，如下所示：

2.3.任意范围

2.3.1.工程配置

在画面中添加一个【滑动画面】控件，用于演示指定任意画面滑动，配置如下所示：

1. 滑动范围：任意

   • 开始画面：13_任意1；
   • 结束画面：13;16;15;14；
   • 滑动方向：上下
   • 循环：√

2. 读写地址：LW8200；(LW8200:当前画面，LW8201:画面集合数量，LW8102:结束画面)

在画面中添加一个【位状态指示灯】控件，用于修改【滑动画面】画面合集。当LWF001=0，滑动合集为“13,16,15,14”；当LWF000=1，滑动合集为“14,13,16,15”；配置如下所示：

1. 读取地址：LWF001
2. 切换开关：√
3. 开关类型：切换开关
4. 使用图库：是
5. 使用文字：是

修改滑动范围:本历程通过LUA脚本修改，也可以通过PLC发送指令修改寄存器的值，LUA程序如下所示：

function on_update(slave,vtype,addr)
    if vtype == VT_LW
    then
        if addr == 0xF001
        then
            local key = get_uint16(VT_LW, addr)
            if key == 0
            then
                set_uint16(VT_LW, 0x8200, 13)
                set_array(VT_LW, 0x8201, {4,  13,16,15,14})
            elseif key == 1
            then
                set_uint16(VT_LW, 0x8200, 14)
                set_array(VT_LW, 0x8201, {4, 14,13,16,15})
            end
        end
    end
end

【多状态指示灯】控件, “范围1”的属性配置如下所示:

1. 读取地址：LW8200，和【滑动画面】控件配置的读写地址一致

2. 状态数：4

3. 状态转换表：13,16,15,14;

4. 控件权限：√

   • 条件地址：LWF001

   • 比较：==

   • 值：0

【多状态指示灯】控件“范围2”的属性配置如下所示:

1. 读取地址：LW8200，和【滑动画面】控件配置的读写地址一致

2. 状态数：4

3. 状态转换表：14,13,16,15；

4. 控件权限：√

   • 条件地址：LWF001

   • 比较：==

   • 值：1

2.3.2.运行预览

运行虚拟屏，点击"任意范围-x"按钮，显示不同的内容和滑动范围，如下所示：