在APP端中左右滑动的交互方式十分常见,在有限的区间内可以放置更多的内容。
基础样式可以将展示内容嵌套在动态面板中,利用动态面板的水平滚动进行功能实现。
制作时BOB体验官网,需将动态面板的尺寸调整页面宽度,超出内容将自动隐藏。同时在预览和编辑时可以看到水平滚动条。
动态面板需在高度上预留一些滚动条的显示位置(注:此类效果只能通过拖动滚动条实现滑动效果)。
针对动态面板自身的“缺陷”,可以借助交互事件进行处理优化。此处主要使用拖动时的交互事件结合移动的交互动作中的跟随水平拖动进行实现。
此时可以实现对应的拖动跟随,但是没有限制对应的左右边界,在移动时会将内容移出或错位。
可移动最大距离为滑动内容减去页面可视区域BOB体验官网,计算出的数值可进行赋予负数,使得左侧大于此距离教程知识。
左侧小于一般为0。若在动态面板中存在左右留白间距BOB体验官网,需在小于数值增加间距,大于处减去间距。
一般常见的左右滑动都是同样的模块内容展示,可以使用中继器进行快速复用,只需后续编辑调整中继器内容。达到原型之间快速复用的效果。(可参考案例中的实战版本内容)。
在基础元件无法支持部分效果或效果不理想的时候可以通过交互事件进行整体交互的重置。BOB体验官网