准备好一张背景图，绘制一个外边框命名“边框”，330*60，圆角30。
绘制一个圆形命名“滑块”，，50*50，圆角25，距离外边框各个边框距离5px。
新建一个页面，作为解锁以后进入的主页。
二、交互设置
将滑块转化为动态面板，设置动态面板载入事件，载入时设置变量location=滑块的x坐标。
设置动态面板拖动事件
1. 拖动时，设置动态面板水平拖动
这里需要注意三点：
（1）边界设置，滑块的位置应当大于等于location小于等于location + 320。这里的270是这么来的：外边框的长度-2*间距。
（2）如果拖动时候如果当前滑块x坐标小于location + 270，则水平拖动。270的由来：外边框长度 – 2*间距 – 滑块宽度。
（3）如果拖动时候如果当前滑块x坐标大于等于location + 270，则进入主页。
2. 拖动结束后如果滑块没有到达终点，滑块退回到原来位置
好了，到这里已经完全实现效果了，按下f5预览吧。
本文由 @ link 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
哈，看完还是不太会？你可能需要从Axure基础开始学
🙂 这里推荐你加Axure实战班的助教小可爱@CC-起点学院（微信：qidiancc520），回复关键词：原型礼包
领取适合产品新人的原型设计大礼包哦，cc还会不定期分享Axure免费视频课程呢！
嗯嗯，看懂了，我是说你上面有个文字小错误，（1）边界设置，滑块的位置应当大于等于location小于等于location + 320。这里的270是这么来的：外边框的长度-2*间距。应该是320是这么来的~~~
人人都是产品经理（woshipm.com）是以产品经理、运营为核心的学习、交流、分享平台，集媒体、培训、社群为一体，全方位服务产品人和运营人，成立12年举办在线讲座1000+期，线下分享会500+场，产品经理大会、运营大会50+场，覆盖北上广深杭成都等20个城市，在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监，他们在这里与你一起成长。
©2010-2020 - 人人都是产品经理 -
粤ICP备14037330号
-
粤公网安备 44030502001309号
企业内训/课程咨询和合作: 18682011582
其他合作/投诉/意见反馈: 18123776760
