Axure 8实现移动端手势拖动

作者: 莫蒂爱瑞克 | 来源:发表于2019-03-27 18:33 被阅读1次

    所需控件:

    两个动态面板,content面板存放滑动内容,view面板实现滑动操作。

    【第一步】

    准备好移动端机型模板。尺寸430,866,XY坐标随自己摆放。

    可以不用,看自己喜好

    【第二步】

    准备好动态面板的内容。我这边放的是中继器(425*1080),中继器的大小可以按照移动端屏幕的尺寸来设置,我只在中继器中设置了数字显示,便于滑动的时候区分,如果想要更清晰的视觉效果,各位可以放点图片文字区分。

    准备动态面板。命名为content(425*1080),大小和中继器的大小一致,也就是要在面板中展示的内容一致。

    把中继器放入Content 动态面板中。动态面板的滚动条不用设置。这个时候我们就完成了关键的一步,准备好了需要滑动的内容。

    左边是中继器,右边是同大小的Content面板

    【第三步】

    准备好滑动操作的面板。准备一个动态面板,命名为view,宽度为425(和Content内容面板的宽度一致),高度为668(屏幕的高度减去模型上下的高度)。

    将Content面板放置到View中。

    View面板中放了Content面板

    【第四步】

    设置View面板的拖动事件。设置View面板的拖动,实际是移动content面板,设置垂直拖动。

    现在可以直接拖动了

    拖动时会发现上下拖动没有边界,只需最后一步设置拖动的边界值。顶部向上拖动时不能大于顶部机型模板头的长度,也就是<=101。顶部向下拖动时可以设置<=(conent高度-view高度),由于向下拖动所以是负数。好了,现在就可以预览滑动了。

    不支持上传视频,没钱充会员哈

    【文件预览:https://al6aty.axshare.com】

    笔芯

    相关文章

      网友评论

        本文标题:Axure 8实现移动端手势拖动

        本文链接:https://www.haomeiwen.com/subject/qfbzvqtx.html