Axure交互动效设计教程：主页上下滑动效果

今天和大家一起巩固学习的交互效果是上下滑动效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

·课上做的主页效果图保存成PNG格式，标签栏、状态栏和导航栏分开保存文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

·建立主页页面->左边元件库中找到动态面板拉入主页页面中->右边样式中修改宽度与高度（375*667）->取名为PM文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

·选中PM动态面板->双击鼠标左键->进入PM面板状态管理面板->选中State1->双击鼠标左键->进入PM/State1页面文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

·左边元件库中找到动态面板拉入PM/State1页面中->右边样式中修改宽度与高度（375*667）->取名为圈子内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

·选中圈子内容动态面板->双击鼠标左键->进入圈子内容面板状态管理面板->选中State1->双击鼠标左键->进入圈子内容/State1页面->将主页效果图拉入页面中->在样式面板中宽度与高度中点击【】（保持宽高比）->修改宽度为375文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

·关闭此页面->进入PM/State1页面->将动态面板的高度调整为主页效果图一样的高度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

·在PM/State1页面中左边元件库中找到动态面板拖入页面->右边样式中将宽度和高度修改并将取名为UP文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

·在PM/State1页面中左边元件库中找到动态面板拖入页面->右边样式中将宽度和高度修改并将取名为Down文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

·回到主页页面->将状态栏、导航栏和标签栏拉入主页中->右边样式面板中修改宽度和高度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

·选中添加->进入条件设立面板文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

·点击倒黑三角->在下来菜单中选择元件范围->依次选择圈子内容->接触->元件范围->UP文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

·点击加号添加条件->点击倒黑三角->在下来菜单中选择元件范围->依次选择圈子内容->接触->元件范围->Down->点击确定文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/35827.html