V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
timeromantic
V2EX  ›  程序员

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

  •  
  •   timeromantic · 2019-07-15 14:36:15 +08:00 · 3915 次点击
    这是一个创建于 1943 天前的主题,其中的信息可能已经有所发展或是发生改变。

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


    技术太渣,没敢 pr~~直接调了你的 api,不要介意~~
    mara1
        23
    mara1  
       2019-07-15 21:34:43 +08:00
    建议换成 logo,识别度高些
    nnnToTnnn
        24
    nnnToTnnn  
       2019-07-16 08:59:46 +08:00
    嗯? 我决定爬楼主,你觉得怎么样?
    bensonwinni
        25
    bensonwinni  
       2019-07-16 09:26:55 +08:00
    https://tophub.today/ 瞅瞅!
    hikari
        26
    hikari  
       2019-07-18 16:57:45 +08:00
    楼主,第一次进入没有默认选中第一个 tab
    timeromantic
        27
    timeromantic  
    OP
       2019-07-18 17:47:08 +08:00   ❤️ 1
    @hikari 这个问题会找时间解决的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2696 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 12:53 · PVG 20:53 · LAX 04:53 · JFK 07:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.