让图文列表滚动起来

fanhuayimeng

本帖最后由 Joseph.Wang 于 2023-7-12 09:03 编辑

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

第1种是，将图文列表绑定页面的一个隐藏表格，并且在页面上记录总页数以及当前的页数，然后定时翻页。
方案1.gif

第2种是，通过JavaScript代码，来操作图文列表中的滚动条。
方案2.gif

实现思路参考的是这个链接：https://www.jianshu.com/p/a2bb9d474998

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

阿南哥 · 阿南哥

能不能隐藏滚动条？

Joseph.Wang · Joseph.Wang

本帖最后由 Joseph.Wang 于 2023-7-12 09:26 编辑

阿南哥发表于 2023-7-10 10:55
能不能隐藏滚动条？

可以的哈，在JS命令中加这一行就可以了，附件已经更新了，可以下载查看哈~
domElement.style.setProperty('overflow', 'hidden');

小崽子来也 · 小崽子来也

感谢分享奇淫技巧

Joseph.Wang · Joseph.Wang

小崽子来也发表于 2023-7-11 08:15
感谢分享奇淫技巧

ilham101 · ilham101

大佬！

图文列表排列模式设置竖向排列情况从上往下，从下往上滚动能不能这里代码留一下

Joseph.Wang · Joseph.Wang

ilham101 发表于 2023-7-12 00:04
大佬！图文列表排列模式设置竖向排列情况从上往下，从下往上滚动能不能这里代码留一下

附件已经更新了，可以下载看下哈

大是大非 · 大是大非

大佬，我使用你的方法进行图文列表嵌套，只滚动第一个图文列表咋办

回复 · 137294886

Joseph.Wang · Joseph.Wang

大是大非发表于 2023-7-20 14:18
大佬，我使用你的方法进行图文列表嵌套，只滚动第一个图文列表咋办

我看您的图文列表中其实是表格吧？那是不是开启表格的滚动，就可以实现您想要的效果呢？

		自动登录	找回密码
密码			立即注册

[资源分享] 让图文列表滚动起来

评分

25 个回复

时代开发者征文活动

活字格认证

微信认证勋章

圣诞拼拼乐