是时候展示 V 友们的神通广大了。。O(∩_∩)O 哈哈~

2019-07-15 14:36:15 +08:00
 timeromantic

先说问题: 前几天做了一个方便 V 友们闲逛摸鱼的网站

最开始我就只爬取了 5 个网站,所以就选用了 bootstrap 的“标签页”样式做分类展示,

选用该样式的实际效果如下:

点击查看目前效果: https://www.printf520.com/hot.html

可是随着我后面爬虫抓取的网站越来越多,上面的分类就被折叠到第二行去了,感觉很丑,如下图

所以求助 V 友们帮忙写一个轮播的效果,可以让多个分类通过点击一个小三角的图标展示更多,如下图:

项目的 github 地址: https://github.com/timeromantic/hotDataList

由于目前换行展示太丑就没有显示更多的网站数据,所以寻求 V 友们的帮助。

最后 github 地址已经给出,我是后端,所以前端部分 js 写得比较粗糙,让 v 友们见笑了

4278 次点击
所在节点    程序员
27 条回复
timeromantic
2019-07-15 14:46:31 +08:00
有 V 友给点意见吗?
timeromantic
2019-07-15 14:52:09 +08:00
啦啦啦啦啦
z0ne
2019-07-15 14:54:09 +08:00
换 UI 库
MrUser
2019-07-15 14:56:50 +08:00
分下类做成 N 级菜单?
hzwjz
2019-07-15 14:58:25 +08:00
keywords in search engine: css overflow
caneman
2019-07-15 14:59:20 +08:00
Google
timeromantic
2019-07-15 15:02:04 +08:00
@z0ne 有推荐的 UI 库?
timeromantic
2019-07-15 15:02:46 +08:00
@hzwjz overflowa 这个怕是不能做出轮播的效果吧
a570295535
2019-07-15 15:12:20 +08:00
把这个例子改改应该可以用吧: http://caibaojian.com/demo/2014/8/swipe.html
插件说明: http://caibaojian.com/swipe.html
maninfog
2019-07-15 15:14:27 +08:00
支持一个,目前在用,很不错
gotounix
2019-07-15 15:16:30 +08:00
标签放左侧加滚动条,多少后台管理系统都是这样做的……
timeromantic
2019-07-15 15:18:03 +08:00
@a570295535 谢谢提供参考
@maninfog 有什么意见或者更多希望抓取的网站可以提供给我,反正是上班时间,工作上的事情处理完了就会处理这个爬虫的一些内容。空一点时间做一下有意义的事情
timeromantic
2019-07-15 15:19:12 +08:00
@gotounix 感觉放左侧不大美观,还是喜欢目前的上下结构
gotounix
2019-07-15 15:26:38 +08:00
@timeromantic #13 美观与否那是设计的问题,原生的 bootstrap 怎么弄都不会美观。
luckyswag
2019-07-15 15:26:59 +08:00
放左侧吧,顺便贴站, 多摸鱼 https://duomoyu.com
15651980765
2019-07-15 15:37:41 +08:00
简单的方法就是导航栏做成横向滚动的,然后前后加按钮,不过总觉得好 low
也可以第二行开始做个折叠,默认隐藏,点击展开
bootstrap 不是集成了轮播图插件吗,改造成轮播的也可以啊
magicalchemist
2019-07-15 15:41:49 +08:00
已经有一个网站叫今日热榜了,好像和你这个差不多。而且出 app 了都
网址
aHR0cHM6Ly90b3BodWIudG9kYXkv
hzwjz
2019-07-15 15:54:28 +08:00
@timeromantic #8 放个滚动条就行了呀(跑
zsy979
2019-07-15 16:13:58 +08:00
骗子 让我点进去看重金求子 捂脸.jpg
EvilCult
2019-07-15 17:48:55 +08:00
就越是什么都不会的时候,才越是需要 react(vue)的一把梭哈.....

比如我,就啥也不会,随便引入个 ui 就搞定了...

Demo :
https://evilcult.github.io/newsapp/build/index.html

代码 :
https://github.com/EvilCult/newsapp

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/583076

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX