页面控件 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | 属性 --------------------------------- .. image:: image/页面/页面属性.png :align: center :alt: 页面属性 | **基础属性 :** + 通用参考：:ref:`基础属性` + **注意：** - 控件序号（id）:页面控件固定为0 - 页面控件设为全局，并不意味整个页面的控件都是全局，而是页面控件自身设为了全局 .. .. hint:: .. - 控件序号（id）:页面控件固定为0 .. - 页面控件设为全局，并不意味整个页面的控件都是全局，而是页面控件自身设为了全局 **坐标属性 :** + 通用参考：:ref:`坐标属性` + **注意：** - 子页面（sub）为是，坐标属性上位机可以修改，即可以修改弹窗的位置和大小。 .. .. hint:: .. - 子页面（sub）为否，页面控件的坐标属性是上位机不可修改。为是，则可以修改。 **背景属性 :** + 通用参考：:ref:`背景属性` **加载属性 :** + 通用参考：:ref:`加载属性` + **注意：** - 页面控件相对其他控件多了4个平移属性。如下图： .. image:: image/页面/页面加载属性.png :align: center :alt: 页面加载属性 | | **特有属性 :** .. image:: image/页面/页面特有属性.png :align: center :alt: 页面特有属性 | + 上下左右滑动页面id：0-255，,255表示禁止滑动 + 子页面（sub）：表示弹窗，设为“是”之后，属性如下图： .. image:: image/页面/页面特有属性子页面.png :align: center :alt: 页面特有属性子页面 | + 背景变暗(bgbl)：弹窗后，背景页面是否变暗 + 关闭上次子页面(close)：有多个弹窗时，是否关闭上一个弹窗，防止重叠 --------------------------------- 事件 --------------------------------- .. image:: image/页面/页面事件.png :align: center :alt: 页面事件 | **弹起事件** 控件按下且弹起后执行 **按下事件** 控件按下后执行 **页面初始化前事件** 当前页面开始加载，在刷新UI之前执行 **页面初始化后事件** 当前页面开始加载，并且已经刷新UI之后执行 **页面离开事件** 切换页面时，执行当前页面的离开事件 .. warning:: 不建议在页面离开事件中写页面切换指令（page()）,否则导致前面写的页面切换指令失效！ --------------------------------- 功能演示 --------------------------------- `点击下载演示工程 `_ .. image:: image/页面/页面功能演示.png :align: center :alt: 页面功能演示 | .. tip:: 把工程配置的启动页面(pid)改为当前页面ID可以立即显示此页面。 | 背景属性 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. image:: image/页面/背景属性.png :align: center :alt: 背景属性 | 演示一： - 功能：点击更改背景颜色。 - 实现原理：在 “演示一” 按钮的 ``弹起事件`` 中编写 :: page.bg.color -= 1000;//修改背景颜色 演示二： - 功能：点击 “演示二” 按钮后切换到loadpage页面，在loadpage页面任意点击即可循环切换背景图。 .. image:: image/页面/页面演示二.png :align: center :alt: 页面演示二 | - 实现原理：loadpage页面，背景属性设为图片，在 ``弹起事件`` 中编写 :: loadpage.bg.pic++; if( loadpage.bg.pic > 2) // 让loadpage.bg.pic在0-2范围内循环 { loadpage.bg.pic = 0; } | 加载属性 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. image:: image/页面/加载属性.png :align: center :alt: 加载属性 | 演示三： - 功能：立即加载loadpage页面 - 实现原理：在 “演示三” 按钮的 ``弹起事件`` 中编写 :: loadpage.loadpage.load.type = 0; //修改全局页面loadpage的加载类型为立即加载 page(loadpage); //切换到loadpage页面 **注意：** loadpage页面控件是全局的，跨页面访问写法：loadpage.loadpage.load.type = [页面名.全局控件名.类别.属性] 演示四： - 功能：loadpage页面从上飞入加载 - 实现原理：在 “演示四” 按钮的 ``弹起事件`` 中编写 :: loadpage.loadpage.load.type = 1; //修改全局页面，加载类型为从上飞入 loadpage.loadpage.load.time = 800; //修改全局页面，加载时间为800ms loadpage.loadpage.load.mode = 1; //修改全局页面，加载效果为缓入 page(loadpage); //切换到演示页面 演示五： - 功能：loadpage页面从左往右平移加载 - 实现原理：在 “演示五” 按钮的 ``弹起事件`` 中编写 :: loadpage.loadpage.load.type = 11; //修改全局页面，加载类型为从左向右平移 loadpage.loadpage.load.time = 1200; //修改全局页面，加载时间为1200ms loadpage.loadpage.load.mode = 5; //修改全局页面，加载效果为反弹 page(loadpage); //切换到演示页面 | 滑动页面 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. image:: image/页面/滑动页面.png :align: center :alt: 滑动页面 | - 功能：页面滑屏 - 实现原理：设置page页面特有属性滑屏页面ID，然后左右滑动屏幕即可看到效果。 .. image:: image/页面/滑屏属性.png :align: center :alt: 滑屏属性 | 子页面（弹窗） ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. image:: image/页面/子页面.png :align: center :alt: 子页面 | 演示六： - 功能：点击后弹窗 - 实现原理：点击 “演示六” 后切换到sub_page页面，sub_page页面特有属性设置如下： .. image:: image/页面/子页面属性.png :align: center :alt: 子页面属性 **注意：** 子页面也是页面，弹窗后，相当于切换到了新页面，旧页面的内存会被释放掉。问题举例： 旧页面有个状态开关控件，是打开状态。弹窗关闭，回到旧页面时，状态开关恢复原样了。如果想保持打开状态，可以将该控件设为全局。 | | | | | |