常用交互组件介绍

作者：简简单单 2017-08-01

提示：您可以先修改部分代码再运行

<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-"> 一、弹出菜单<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  弹出菜单是原型设计中最常用的组件，许多组件的使用方法也与它类似，熟练使用弹出菜单将会给您带来莫大的帮助。接下来我们从实际案例来看一看如何使用弹出菜单。<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  1. 随意拖出一个组件，这里我们以Mockplus中的按钮组件为例。<a href="https://img.111com.net/get_pic/php/upload/image/20170801/1501588779238167.png" class="js-smartPhoto" target="_blank"><img alt="8个常用交互组件介绍 三联" src="https://img.111com.net/get_pic/php/upload/image/20170801/1501588779238167.png" data-ke-src="http://img18.3lian.com/d/file/201708/01/bfa94bf0943066cacc0222172231e8d0.png" style="border: 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-" border="1"/></a><span style="color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke- display: inline !important; float: none;"><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  2.拖出弹出菜单组件，将按钮右上角的链接点与菜单组件相连。<a href="https://img.111com.net/get_pic/php/upload/image/20170801/1501588780669509.gif" class="js-smartPhoto" target="_blank"><img alt="" src="https://img.111com.net/get_pic/php/upload/image/20170801/1501588780669509.gif" data-ke-src="http://img18.3lian.com/d/file/201708/01/3ec68ad4f2054fe2ccb47a80d089d337.gif" style="border: 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-" border="1"/></a><span style="color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke- display: inline !important; float: none;"><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  3.双击弹出菜单以编辑菜单位置及内容。<a href="https://img.111com.net/get_pic/php/upload/image/20170801/1501588780746100.gif" class="js-smartPhoto" target="_blank"><img alt="" src="https://img.111com.net/get_pic/php/upload/image/20170801/1501588780746100.gif" data-ke-src="http://img18.3lian.com/d/file/201708/01/318e73f141c9dd3d330a1a937313aafe.gif" style="border: 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-" border="1"/></a><span style="color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke- display: inline !important; float: none;"><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  二、弹窗<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  弹窗与弹出面板的操作步骤基本一致，区别在于弹出菜单的四个菜单项都可再设置交互动作，而弹窗仅有“是”、“否”两个选项可供设置交互动作，同时，弹窗内容的格式也与弹出面板略有区别。<a href="https://img.111com.net/get_pic/php/upload/image/20170801/1501588780717960.gif" class="js-smartPhoto" target="_blank"><img alt="" src="https://img.111com.net/get_pic/php/upload/image/20170801/1501588780717960.gif" data-ke-src="http://img18.3lian.com/d/file/201708/01/0edd9201096c764967ae8beb646d37e2.gif" style="border: 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-" border="1"/></a><span style="color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke- display: inline !important; float: none;"><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  三、抽屉<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  抽屉是一个常用的容器型组件，其特点为高度封装、高度可调节性、高度可容纳性，换句话说，您无需自行设计抽屉的细节，只需简单设置几下即可的到一个以多种方式滑出、能装入绝大多数组件的抽屉。<a href="https://img.111com.net/get_pic/php/upload/image/20170801/1501588781257915.gif" class="js-smartPhoto" target="_blank"><img alt="" src="https://img.111com.net/get_pic/php/upload/image/20170801/1501588781257915.gif" data-ke-src="http://img18.3lian.com/d/file/201708/01/5f7753739af75641073932e5e6f0a657.gif" style="border: 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-" border="1"/></a><span style="color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke- display: inline !important; float: none;"><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">在将按钮的链接点与抽屉连接后，双击抽屉图标即可添加组件。<a href="https://img.111com.net/get_pic/php/upload/image/20170801/1501588781752716.gif" class="js-smartPhoto" target="_blank"><img alt="" src="https://img.111com.net/get_pic/php/upload/image/20170801/1501588781752716.gif" data-ke-src="http://img18.3lian.com/d/file/201708/01/ab92a1c322641acbd9eee27761435e66.gif" style="border: 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-" border="1"/></a><span style="color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke- display: inline !important; float: none;"><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  四、图片轮播<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  图片轮播组件支持数张图片的乱转展示，同样操作简单。先将图片轮播组件拖入工作区内，双击添加图片即可。<a href="https://img.111com.net/get_pic/php/upload/image/20170801/1501588782182862.gif" class="js-smartPhoto" target="_blank"><img alt="" src="https://img.111com.net/get_pic/php/upload/image/20170801/1501588782182862.gif" data-ke-src="http://img18.3lian.com/d/file/201708/01/0f98d53828dcead82a4491b9c5a99e53.gif" style="border: 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-" border="1"/></a><span style="color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke- display: inline !important; float: none;"><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  五、面板<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  面板其实就是一个可供放置组件的容器。<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  将能容面板拖至需要的地方，调整大小，双击进入编辑模式，拖入需要的组件即可。注意，组件超出面板边界的地方不会显示。你会发现：因为是容器，面板是有边界的，子组件超过边界的部分会被“切掉” 。另外有意思的是：和“组”不同，设置交互的时候，可以将面板中的子组件作为交互目标，但“组”不行，只能将整个组设为交互目标，因为组是几个组件编组而成，编组之后，就被视为一个整体。<a href="https://img.111com.net/get_pic/php/upload/image/20170801/1501588782614210.gif" class="js-smartPhoto" target="_blank"><img alt="" src="https://img.111com.net/get_pic/php/upload/image/20170801/1501588782614210.gif" data-ke-src="http://img18.3lian.com/d/file/201708/01/77a04fe1431d538c56e2a3b15fbba845.gif" style="border: 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-" border="1"/></a><span style="color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke- display: inline !important; float: none;"><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  六、弹出面板<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  弹出面板是最为灵活的交互组件。拖入一个弹出面板，双击打开，你会发现它里面什么也没有，但是利用它，我们完全可以自己制作出需要的弹窗、消息框、提示框等许多交互组件。<a href="https://img.111com.net/get_pic/php/upload/image/20170801/1501588782179727.gif" class="js-smartPhoto" target="_blank"><img alt="" src="https://img.111com.net/get_pic/php/upload/image/20170801/1501588782179727.gif" data-ke-src="http://img18.3lian.com/d/file/201708/01/ac0bc0022f0a19cea7aa6ab17ebef41a.gif" style="border: 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-" border="1"/></a><span style="color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke- display: inline !important; float: none;"><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  七、内容面板<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  内容面板主要用来实现内容的快速切换。但是它一般不会单独使用，你可以使用它和菜单栏、列表、选项卡等具有多选性质的组件来配合，共同完成内容切换。<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  首先在内容面板中设置三个层，分别连接到三个目标页面上。然后将选项卡上的链接一一对应地与三个层相连，内容切换就完成了。<a href="https://img.111com.net/get_pic/php/upload/image/20170801/1501588783204013.gif" class="js-smartPhoto" target="_blank"><img alt="" src="https://img.111com.net/get_pic/php/upload/image/20170801/1501588783204013.gif" data-ke-src="http://img18.3lian.com/d/file/201708/01/e34c2c23202ba31e701279226ce1fc60.gif" style="border: 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-" border="1"/></a><span style="color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke- display: inline !important; float: none;"><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  八、滚动区<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  当屏幕大小不足以容纳我们需要展示的内容时，我们可以使用滚动区组件在有限的空间内展示更多内容。<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">  将滚动区组件拖入工作区后，调整大小，然后双击进入编辑模式。在编辑模式中拖入需要加入滚动区的组件，鼠标点击“ ”来扩展滚动区大小，点击“-”来收缩滚动区大小，如果你同时按下Ctrl键，可加速扩展或收缩。<a href="https://img.111com.net/get_pic/php/upload/image/20170801/1501588783516854.gif" class="js-smartPhoto" target="_blank"><img alt="" src="https://img.111com.net/get_pic/php/upload/image/20170801/1501588783516854.gif" data-ke-src="http://img18.3lian.com/d/file/201708/01/d1b7bdadb906de0d8b645a47497b480c.gif" style="border: 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-" border="1"/></a>

提示：您可以先修改部分代码再运行

常用交互组件介绍

相关文章

精彩推荐