Joseph.Wang 发表于 2023-7-10 10:52:53

让图文列表滚动起来

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

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

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

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

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

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



阿南哥 发表于 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

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

;P

ilham101 发表于 2023-7-12 00:04:20

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

Joseph.Wang 发表于 2023-7-12 09:01:56

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

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

大是大非 发表于 2023-7-20 14:18:16

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


137294886 发表于 2023-7-20 22:32:34

:i0tw:

Joseph.Wang 发表于 2023-7-31 15:44:15

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

我看您的图文列表中其实是表格吧？那是不是开启表格的滚动，就可以实现您想要的效果呢？
页: [1] 2 3
查看完整版本: 让图文列表滚动起来