src=在 APP 端中左右滑动的交互方式十分常见,在有限的区间内可以放置更多的内容。
src=基础样式可以将展示内容嵌套在动态面板中,利用动态面板的水平滚动进行功能实现。
BOB体验官网
src=制作时,需将动态面板的尺寸调整页面宽度,超出内容将自动隐藏。同时在预览和编辑时可以看到水平滚动条。
动态面板需在高度上预留一些滚动条的显示位置(注:此类效果只能通过拖动滚动条实现滑动效果)。
针对动态面板自身的 缺陷 ,可以借助交互事件进行处理优化。此处主要使用拖动时的交互事件结合移动的交互动作中的跟随水平拖动进行实现。
此时可以实现对应的拖动跟随,但是没有限制对应的左右边界,在移动时会将内容移出或错位。
可移动最大距离为滑动内容减去页面可视区域,计算出的数值可进行赋予负数,使得左侧大于此距离。
左侧小于一般为 0。若在动态面板中存在左右留白间距,需在小于数值增加间距BOB体验官网,大于处减去间距。
一般常见的左右滑动都是同样的模块内容展示教程知识,可以使用中继器进行快速复用,只需后续编辑调整中继器内容。达到原型之间快速复用的效果。(可参考案例中的实战版本内容)。
在基础元件无法支持部分效果或效果不理想的时候可以通过交互事件进行整体交互的重置。
Brose,微信公众号:PMYX,人人都是产品经理专栏作家。关注广告营销、K12 教育BOB体验官网、智慧零售。擅长系统需求挖掘与功能设计。
据官方消息,本届成都车展主题为“享蓉城·促产业·驭未来”,展期为8月26日~9月4日,将在中国西部国际博览城举办。