找回密码
 立即注册

QQ登录

只需一步,快速开始

Joseph.Wang
超级版主   /  发表于:2023-7-10 10:52  /   查看:6482  /  回复:25
本帖最后由 Joseph.Wang 于 2023-7-12 09:03 编辑

如果想使用除表格以外的形式展示数据,通常都会使用到图文列表,因为它可以自由灵活的定义数据的展示形式,那是否有想过怎样让图文列表中的内容滚动起来呢?比如展示优秀员工、重点客户、热卖商品等等,其实这些也可以使用图片轮转插件来实现,但是如果我们想轮播两行,或者自定义图片和文字的位置,使用图片轮转的插件就不太行了,接下来就分享一下图文列表滚动的实现方式,有两种思路来实现。

第1种是,将图文列表绑定页面的一个隐藏表格,并且在页面上记录总页数以及当前的页数,然后定时翻页。
方案1.gif
第2种是,通过JavaScript代码,来操作图文列表中的滚动条。
方案2.gif
实现思路参考的是这个链接:https://www.jianshu.com/p/a2bb9d474998

附件有对应工程文件,大家可以参考,有更好的思路,也欢迎大家分享哈~~



图文列表滚动.fgcc

1.16 MB, 下载次数: 1090

评分

参与人数 3满意度 +15 收起 理由
fanhuayimeng + 5
lh123 + 5
lijetcart + 5

查看全部评分

25 个回复

倒序浏览
阿南哥活字格认证
银牌会员   /  发表于:2023-7-10 10:55:36
沙发
能不能隐藏滚动条?
回复 使用道具 举报
Joseph.Wang
超级版主   /  发表于:2023-7-10 18:08:23
板凳
本帖最后由 Joseph.Wang 于 2023-7-12 09:26 编辑
阿南哥 发表于 2023-7-10 10:55
能不能隐藏滚动条?

可以的哈,在JS命令中加这一行就可以了,附件已经更新了,可以下载查看哈~
domElement.style.setProperty('overflow', 'hidden');
回复 使用道具 举报
小崽子来也
初级会员   /  发表于:2023-7-11 08:15:38
地板
感谢分享奇淫技巧
回复 使用道具 举报
Joseph.Wang
超级版主   /  发表于:2023-7-11 10:19:56
5#
回复 使用道具 举报
ilham101
高级会员   /  发表于:2023-7-12 00:04:20
6#
大佬!图文列表排列模式  设置   竖向排列  情况 从上往下,从下往上滚动能不能这里代码留一下
回复 使用道具 举报
Joseph.Wang
超级版主   /  发表于:2023-7-12 09:01:56
7#
ilham101 发表于 2023-7-12 00:04
大佬!图文列表排列模式  设置   竖向排列  情况 从上往下,从下往上滚动能不能这里代码留一下

附件已经更新了,可以下载看下哈
回复 使用道具 举报
大是大非
金牌服务用户   /  发表于:2023-7-20 14:18:16
8#
大佬,我使用你的方法进行图文列表嵌套,只滚动第一个图文列表咋办
2.gif
微信图片_20230720141753.png
回复 使用道具 举报
137294886
金牌服务用户   /  发表于:2023-7-20 22:32:34
9#
回复 使用道具 举报
Joseph.Wang
超级版主   /  发表于:2023-7-31 15:44:15
10#
大是大非 发表于 2023-7-20 14:18
大佬,我使用你的方法进行图文列表嵌套,只滚动第一个图文列表咋办

我看您的图文列表中其实是表格吧?那是不是开启表格的滚动,就可以实现您想要的效果呢?
回复 使用道具 举报
123下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部