• 请不要在回答技术问题时复制粘贴 AI 生成的内容
timeromantic
V2EX  ›  程序员

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

  •  
  •   timeromantic · Jul 15, 2019 · 5110 views
    This topic created in 2669 days ago, the information mentioned may be changed or developed.

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

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

    选用该样式的实际效果如下: DeepinScrot-1212.png

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

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

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

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

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

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

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

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

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

    代码 :
    https://github.com/EvilCult/newsapp
    timeromantic
    timeromantic
    OP
    Jul 15, 2019
    21
    @EvilCult 666666 老哥,这么快就做好了。
    EvilCult
    EvilCult
    Jul 15, 2019
    22
    我是萌新...[无脸]
    用的这个 UI : https://material-ui.com
    直接引入就行了....


    技术太渣,没敢 pr~~直接调了你的 api,不要介意~~
    mara1
    mara1
    Jul 15, 2019
    23
    建议换成 logo,识别度高些
    nnnToTnnn
    nnnToTnnn
    Jul 16, 2019
    24
    嗯? 我决定爬楼主,你觉得怎么样?
    bensonwinni
    bensonwinni
    Jul 16, 2019
    25
    https://tophub.today/ 瞅瞅!
    hikari
    hikari
    Jul 18, 2019
    26
    楼主,第一次进入没有默认选中第一个 tab
    timeromantic
    timeromantic
    OP
    Jul 18, 2019❤️1
    27
    @hikari 这个问题会找时间解决的
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1397 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 69ms · UTC 20:16 · PVG 04:16 · LAX 12:16 · JFK 15:16
    ♥ Do have faith in what you're doing.