Axure教程：以微信为例，模拟内容的滚动浏览并触底反弹效果

社区服务
高级搜索
猴岛论坛QQ微信技术Axure教程：以微信为例，模拟内容的滚动浏览并触底反弹效果
发帖 回复
倒序阅读 最近浏览的帖子最近浏览的版块
« 返回列表
1个回复

Axure教程：以微信为例，模拟内容的滚动浏览并触底反弹效果

 楼层直达
花开那年丶

ZxID：20774595

等级: 版主
๓ 校园青春欢迎你๓

举报 只看楼主 使用道具 楼主   发表于: 2018-08-21 0

无论是APP还是网站，上下纵向浏览或者左右横向浏览是非常常见的，除此之外，大家肯定也都注意到了一种情况一种现象：当内容浏览到底部时，继续下拉页面会出现触底反弹，顶部也是如此。今天我们以微信聊天记录为例，一起来探索这种浏览方式的实现方法。

效果图奉上

原理：拖动面板沿轴移动来实现浏览，结束面板拖动时，如果面板离开档板，将会移动（反弹）回合适的位置。
设计步骤
1、设计好基本元件

2、编辑面板中的内容

3、将内容转换为动态面板

4、创建档板

5、设置浏览区域面板的交互，从何实现内容面板的滚动浏览

6、设置浏览区域面板的交互，从何实现内容面板的触顶反弹


7、设置浏览区域面板的交互，从何实现内容面板的触底反弹



8、到这，已经全部设置好了，点击预览看看效果吧。
是不是成功啦，哈哈，恭喜，又比以前的你厉害了一点。
本文由 @萍萍仔 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自 Pixabay，基于 CC0 协议
本帖de评分： 共 1 条评分 ＤＢ +15
ＤＢ+15 2018-08-25

优秀文章~
隐藏
打赏 收藏 新鲜事

相关主题

回复 引用
　 鲜花[0]　 鸡蛋[0]
潘粤明

ZxID：1818181

等级: 元老
配偶: 陈纯纯
不忘初心 方得始终。

举报 只看该作者 沙发   发表于: 2018-08-25 0
优秀文章~
回复 引用 新鲜事
　 鲜花[0]　 鸡蛋[0]
« 返回列表
发帖 回复