提问 发文

图文组合循环滚动播放

易知微创新技术团队

| 2024-10-10 10:42 86 0 0

一、预览效果

图片


二、实现逻辑

利用【选项卡】与【图文组】进行绑定,而后添加【自定义事件】,通过【图文组】移动的方式实现图文组合各模块循环滚动播放。


三、操作步骤

添加【动态面板】,修改动态面板尺寸为【W:500】【 H:362】,双击【动态面板】或点击右侧【编辑动态面板】,进入动态面板。

图片

点击【组件】→【辅助】→【图片】,添加展示所需数量图片,本文添加四张图片以作示例。

图片

添加【图片】后,调整一下图片的位置,也可在右侧修改图片位置,分别设置四张图片为Y:{ 0,120,240,360 }。

图片

选中【图片】→【样式】→【全局】→上传或修改,添加需要展示的图片。

图片

点击【组件】→【文字】→【标题】,添加所需且对应图片数量文字组件,并修改文本内容。

图片

在左侧选中对应的【图片】和【文字组件】,点击【图片】按住电脑【Ctrl键】再点击【文字组件】,确认选中后按鼠标右键,点击【成组】。

图片

分组完成后如下图所示↓

图片

点击【组件】→【交互】→添加【选项卡】。

图片

选中【选项卡】→【样式】→【全局】→打开眼睛标志→设置【间隔时长】和【点击停留】。

图片

点击【交互】→添加【自定义事件】→事件类型设置为【状态改变】→点击【添加条件】。

图片

设置条件为s=1,点击保存。

图片

接下来我们要设置当【选项卡】轮播时,控制下面的图文组进行移动,如下图。

图片

需要设置4个【自定义事件】对应四个【图文组】,设置5个【动作】对应【图文组】的移动次序,详细设置参考如下步骤↓↓↓

图片


如需教程Demo,请关注公众号【易知微产品帮助中心】,发送“图文组滚动播放”即可获得~
收藏 0
分享
分享方式
微信

评论

游客

全部 0条评论

135

文章

1.08K

人气

0

粉丝

0

关注

官方媒体

轻松设计高效搭建,减少3倍设计改稿与开发运维工作量

开始免费试用 预约演示

扫一扫关注公众号 扫一扫联系客服

©Copyrights 2016-2022 杭州易知微科技有限公司 浙ICP备2021017017号-3 浙公网安备33011002011932号

互联网信息服务业务 合字B2-20220090

400-8505-905 复制
免费试用
微信社区
易知微-数据可视化
微信扫一扫入群