🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### **本次实现的功能是通过设置页面交互实现页面和组件的跳转效果** **1.页面动作跳转入口** 页面添加交互: ![](https://img.kancloud.cn/42/d2/42d2b244a2cfdbf9ae69e898bc9cf3b7_1366x616.png) ![](https://img.kancloud.cn/f8/5b/f85bcf925229f793d0e131792d29ee6f_1363x388.png) 组件添加交互:与页面添加交互方式一致 ![](https://img.kancloud.cn/2e/52/2e52b0457cb9451248d8727fa440a78b_1362x472.png) ![](https://img.kancloud.cn/a5/9c/a59c4185053ced7f59a63c29d743825e_1366x466.png) 交互设置: 交互事件目前只有单击时,动作目前支持打开页面,数据交换暂不支持;动作设置可选择打开的页面以及打开的方式 ![](https://img.kancloud.cn/f3/66/f366b879c54f8f8f1097cb305d715721_1070x636.png) 打开页面可选择内部页面和外部页面 ![](https://img.kancloud.cn/03/e8/03e8e5940dfa304b5549171b36b500bb_845x411.png) 1)当选择外部页面时,打开方式只能选择新页面打开,当前页面打开两种方式,并且只能输入http或者https开头的网址 ![](https://img.kancloud.cn/dd/ba/ddba4b28b36f5d9660b27a1d6569eaef_505x222.png) 2)当选择应用创建的内部页面时,打开方式可选择:新页面打开、当前页面打开、弹框显示、浮层显示 ![](https://img.kancloud.cn/16/63/1663b1561baec0c760c5e2c69f5a1349_900x361.png) **2.交互效果** 1)新页面打开:在新的页面打开配置的外部页面或者内部页面 2)当前页面打开:在当前的页面打开配置的外部页面或者内部页面 3)弹框显示:在当前页面的基础上弹出弹框来显示配置的页面 4)浮层显示:在当前页面的基础上弹出一个浮层来显示配置的页面,与弹框区别在于弹框是可见当前底部的页面,浮层是整个覆盖了当前底部的页面,两者都没有重新打开当前页面 **3.流水线** ![](https://img.kancloud.cn/29/29/292997f89aa930a22777238c1f9039a1_1360x491.png) 1)页面结构: 显示在当前终端下可见的所有页面 每个应用需要设置一个初始页面,默认为第一个页面 如果设置某个页面为初始页面,则会显示在第一个 ![](https://img.kancloud.cn/0e/4b/0e4b2822aaaf149478d06c6df065f7b6_649x508.png) 2)流水线工具栏: 从左向右依次为:移动端页面模式、PC端页面模式、管理页面模式、全局页面流水线、应用预览,目前不支持管理页面模式,点击其中某个模式则工作区会显示当前模式下的页面效果 ![](https://img.kancloud.cn/9d/8d/9d8d7f4b4dc06cea3632f0ba89a13da2_956x202.png) ![](https://img.kancloud.cn/71/fe/71feaa114ba13af826be83eb0c436099_1366x536.png) 说明:应用预览是从当前选中的工作区终端模式下的预览效果 3)工作区: 3.1)工作区左侧的页面是源页面,右侧的页面是目标页面 通过选择页面结构的页面可以切换工作区的源页面。 3.2)工作区支持的非常规交互: 鼠标滚轴放大缩小,ctrl + 往前滚是放大,ctrl + 往后滚是缩小 鼠标长按拖动 点击放大或缩小的按钮可以缩放页面,工作区的默认缩放大小为100% 目标页面是对应页面的缩略图,不支持设置交互。 3.3)源页面支持的页面交互: 若一个元素已经设置了交互,则点击后会在右侧显示出对应的目标页面,以及对应的交互明细,用户可以某一个交互明细进行修改、删除,同时可以进行新建交互。 若一个元素没有设置过交互,则点击时,可以通过【新建交互】功能创建新的交互。 以类似导线的形式显示源页面到目标页面的数据流向,当前选中的元素流向高亮显示 ![](https://img.kancloud.cn/45/da/45da8c727de89891577dd0f55ceb7b2e_1364x624.png) 4)交互列表: 可对选中的组件或者页面的交互效果进行重新编辑,也可新建交互 ![](https://img.kancloud.cn/c4/a9/c4a9fac087712cc4f841c250616a4c46_1365x581.png) **4.全局流水线** ![](https://img.kancloud.cn/18/46/18461f0a896eaaeaa8acb25434d3050a_1366x676.png) 1)全局页面流水线显示当前页面模式下的所有页面的数据流向,默认的页面模式为:移动端。 2)数据流向以起始页面为起点,默认选中下一个交互页面中的其中一个页面,直至没有下一级交互的页面。 ![](https://img.kancloud.cn/74/bf/74bf100dfc9f08056ed982b4f7e70522_1366x640.png) ![](https://img.kancloud.cn/8d/e3/8de32e6586318ce9ebf5207b3a2723b4_1352x646.png) 3)双击或点击编辑可以对选中的页面交互跳转进入流水线页面进行修改 备注:本次还实现了组件以及页面的样式效果