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

V 友们,这个设计能用 flex 布局实现吗,后台返回的是一个数组对象。我想在交互上方便一下,如果 flex 实现不了,有没有其他能把按钮循环出来的办法

  •  
  •   MRG0 · 226 天前 · 3744 次点击
    这是一个创建于 226 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有个关键问题,第二排按钮会捅到支付方式下边

    第 1 条附言  ·  226 天前
    发帖的时候太着急了,补充一下:

    1 ,后台会返回一个按钮数组,需要根据数组循环渲染按钮

    2 ,按钮长短不一,按 UI 图来看,长的要在第一排

    3 ,没有后端支持,只能前端改

    4 ,第一排的按钮需要和“支付方式”对齐,第二排按钮有可能前伸到“支付方式”下边

    5 ,当按钮减少为三个时,长的一个会在第一排,短的两个会在第二排,当按钮只有一个时只有第一排了
    Asakijz
        1
    Asakijz  
       226 天前
    没看懂需求
    wednesdayco
        2
    wednesdayco  
       226 天前
    能,话说你这按钮的大小不会不一致吧?
    pengtdyd
        3
    pengtdyd  
       226 天前
    可以,但是你能问出这个问题,我感觉你写不出来。
    vitovan
        4
    vitovan  
       226 天前
    .container {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    }

    这行吗?
    LaGeNanRen
        5
    LaGeNanRen  
       226 天前   ❤️ 2
    在座的各位有几个听懂他的需求和问题了 :)
    wednesdayco
        6
    wednesdayco  
       226 天前
    @LaGeNanRen 我猜他说的是按钮数据是个数组,布局的时候分成两排。 实现方式多得很
    MRG0
        7
    MRG0  
    OP
       226 天前
    @wednesdayco 不一致,有大有小,甚至顺序也有要求
    MRG0
        8
    MRG0  
    OP
       226 天前
    @pengtdyd 我想一天了,就这个按钮捅到支付方式下边这个问题,实在想不到如何解决
    MRG0
        9
    MRG0  
    OP
       226 天前
    @wednesdayco #6 分布成两排倒是好实现,但是如何让第二排按钮一直可以前伸到支付方式下边呢
    admol
        10
    admol  
       226 天前   ❤️ 1
    让我想到了在地图上打电话的那个,你应该先这样,再这样,然后再这样,最后再这样,不就可以了吗
    MRG0
        11
    MRG0  
    OP
       226 天前
    @vitovan 会被“支付方式”这个 div 挡住
    admol
        12
    admol  
       226 天前
    @admol 地图 => 地铁
    MRG0
        13
    MRG0  
    OP
       226 天前
    @admol #12 😰
    ZGame
        14
    ZGame  
       226 天前
    你要求后端返回的不同数组 对应不同的 type 不就行了, 生成不同的模板组件...
    wednesdayco
        15
    wednesdayco  
       226 天前
    @MRG0 按钮大小不固定的话我目前只能想到把按钮单独放到一个容器里面,然后将其绝对定位覆盖在支付方式容器,第一个按钮 width100%占满换行第二排
    ZGame
        16
    ZGame  
       226 天前
    type => itemWarpperContainerOneStyle ,Two,Three........
    sankemao
        17
    sankemao  
       226 天前
    你把支付方式和按钮再用 flex 左右套下不就行了
    hlwjia
        18
    hlwjia  
       226 天前
    嘛,写 4 个 switch case 好了
    me1onsoda
        19
    me1onsoda  
       226 天前
    这个不就是靠右,然后自动换行嘛
    shuxhan
        20
    shuxhan  
       226 天前
    这应该就是个纯粹的 css 问题,但是我没太能理解 op 想要的布局到底什么,看完图我更困惑了
    sgiyy
        21
    sgiyy  
       226 天前
    左右,上下布局不就好了(另外问题问得都很难理解)
    wusheng0
        22
    wusheng0  
       226 天前
    四种支付方式?
    第二排按钮会捅到支付方式下边,什么是捅,想象不出来,第二排按钮说的是哪个?
    acvvkhalil
        23
    acvvkhalil  
       226 天前
    太容易了啊, 怎么实现都行, 你先左右, 然后右边在让它换行也行, 不让就第一个按钮和支付方式当行, 把剩余的放下面一行不就好了
    AndrewAdam
        24
    AndrewAdam  
       226 天前
    理解不能 去喷交互设计师
    dudubaba
        25
    dudubaba  
       226 天前
    简单,你猜 css 选择器 nth-child 是干嘛的
    MRG0
        26
    MRG0  
    OP
       226 天前
    @sgiyy 但是第一个图的情况如何实现呢,会被支付方式的 div 挡住
    jy02534655
        28
    jy02534655  
       226 天前
    flex 布局实现不了的可以试试 grid 布局
    MRG0
        29
    MRG0  
    OP
       226 天前
    @dudubaba stylus 下 nth-child 选择器居然不起效, 写法:

    .a{
    width 100%
    height 102px
    &:nth-child(1){
    background #123456
    }
    }
    darkengine
        30
    darkengine  
       226 天前
    楼上老哥已经解释得很清楚了,先拆了左右两列,再在右边那一列对支付方式按钮进行布局
    MRG0
        31
    MRG0  
    OP
       226 天前
    @wednesdayco #27 这也太牛了吧👍
    wednesdayco
        32
    wednesdayco  
       226 天前
    @MRG0 只是个意思 你可以再发散下
    MRG0
        33
    MRG0  
    OP
       226 天前
    @wednesdayco #32 多谢,心里有数了
    vitovan
        34
    vitovan  
       226 天前
    @MRG0 #11 支付方式的 z-index 放小一点,直接 float: left 可以吗?
    RATIONALITY
        35
    RATIONALITY  
       226 天前   ❤️ 1
    @wednesdayco #27 你舅宠他爸
    MRG0
        36
    MRG0  
    OP
       226 天前
    @vitovan #34 浮动恐怕不好搞
    MRG0
        37
    MRG0  
    OP
       226 天前
    @wusheng0 图中其实是四种情况,支付方式有多少种我也未知;“捅”就是一个往前的动词,我说的太口语化了😂
    Dongpenghui
        38
    Dongpenghui  
       226 天前
    display:grid 布局,你去研究一下
    MRG0
        39
    MRG0  
    OP
       226 天前
    mingl0280
        40
    mingl0280  
       226 天前 via Android
    横着拆也可以,两行,第一行两列,第二行 flex ,按钮 1 右对齐,剩下的想咋排咋排
    MarkP
        41
    MarkP  
       226 天前
    @wednesdayco #27 饭喂到嘴边不过如此了
    sgiyy
        42
    sgiyy  
       226 天前
    @MRG0 #26 那也没必要太复杂的布局,上下布局即可。第一行只有一个按钮就取数组的第一项(按钮右边,支付方式左边);数组的剩余项再遍历成第二行。
    sgiyy
        43
    sgiyy  
       226 天前
    @sgiyy #42 具体按钮放第一排第二排,你自己排下序就好了。
    asdjgfr
        44
    asdjgfr  
       226 天前
    [这样么?]( https://play.vuejs.org/#eNqdVk+P20QU/yqvlmjsEjubXYFWJlloUQ+LoCDaG+bg2ONkdicz1sw4mxBFohJSQZQLEkVCvYBExYWKGwgk+DLNsvsteDNjJw7d9tBdadd+f37vvd/7zSRL72ZZRrOKeLE3UJmkpQZFdFUeJZxOSyE1LEGSoguZmJaVJjmsoJBiCh1M6iQ84ZngSmMMz8X0luYKhibBl6kx3NXyppR+ELy1DVWIWgc2oL4fwPAIlgkH6PVgff/BxdO/zx89WP/6/eV3/6z/fLJ+/AscwrO/fn72x9f//vDF5ePPL57cP//mp4sfH5ocB3wm0/J9wsd6gtCHWBGAFuB/kOpJNE3nfhRF2zajWcoqgvbSV1qa6vgvYjY9CGDQQgtcY66MYCRiYvxKqIGDkUiw5C3KXJZxrswfRjQUouI5jlGkTBE7yguyIkOn76t+F9S+ZVHt1wUhBNVvimOTeZUR30+zDLdZyS7QfN6FVMot946wa6749esmrMG6khDY9Kll5do0P1giKis18RMv8czqjdGO1vIhduOqR0OXNay68MmnyNWqrRpT/TifPy+aRk41HQXl+THPyby1ABgOh9DpGP7Nb1HxTFOBXFqN3qmm/pTyLuA268nqhuyOCyaENAHwujO4LCx+w2Zgn1eANsLfwUNLuojM8fGXuGVDZdxqAlf4RmCmd4N1zh9+dfntU+j8v3CkBcJTPvYP3gwixSiuNawPXI1ziGJ7vjNSSILMb5raVZI5uDu91/mDnrsY8ErAF02mJUs1wTeAwajSGpHfybCJ02Hi1SUS72j95e/nj34b9FyEi87pDDKWKoWRIzHHKLf/HYfC05Vy9BUpH6sJHfTQ2wRWbAtggcOxFFW5QcIQRmEWFkJiiD/SuFaUeQC4vkYoiQfxKVmgHz2o0DoRIFZ6wQjal3BGc7MbzK+1A29Dp7+391oHYkDFE5QZyY1k5Jjye6KMwW8Ueg0Twr45PogPR41yAwMR9vfK+Q4Gnott81tGZyEtzJDYgMHrdDBqubQNrVY7rNqsHqMNRb2KObZr3ga91soGdkR8uOE0UKZ5jkKKYc+ePDeOe7O7R75tHKNKhzY3Bi64OerWH+EaXUROFRZZxFAwMrdgIyFzImPol3PkntEcRizNTuvLTNHPEGsk9MQaxIxIPGlnMaSVFta06c1wtino5OFq1lva33MBAJrMdZgyOsYZMsI1kdtGW3Jx2aZRBLeJ5jk0i4rtuqxtbN7q2lfNd1IpTYtFiPeTxlox4Hly5fDEWJrB63paob+g4+hECY6fsrZ04plLjDIiPyzN0URNxs2dmngpQyLeszZzrXYbezYh2ekV9hOFMo7x4SOklcgZSbyNT+NGiXbu23fvID8t51TkFcPolzg/Jri6yvTowm6hcLHtVpzt9th+V8Bt3VO358iGaoYyjbo73c2N3xrefcno23YPooP6A3Hlrf4DZtbtDA==)

    排下序就行了。
    asdjgfr
        46
    asdjgfr  
       226 天前
    刚才没仔细看,这个应该满足 ui 的需求了 https://codesandbox.io/s/sleepy-lumiere-28khrx?file=/src/App.vue
    jiqiren
        47
    jiqiren  
       226 天前
    看懂了,但没完全懂....
    Alander
        48
    Alander  
       226 天前
    这个问题简单抽象一下就好了吧?

    从 ui 层面上看

    就是 第一行永远存在,第二行可能不存在 判断条件是按钮个数

    第一行永远只会有一个按钮,这个按钮是最长的按钮

    两个 div 第一个是 flex ,第二个直接 text-align:right 就完事了
    Seanfuck
        49
    Seanfuck  
       226 天前
    非要 flex 吗?普通方式很简单的:
    先 js 排序拿出长的;
    然后弄两个 div ,第一 div 放支付方式,长的按钮 float:right;
    第二 div 里放剩下的按钮,也是 float:right ,div 加上 overflow
    MRG0
        50
    MRG0  
    OP
       226 天前
    @sgiyy #42 我最开始也是这么想的,但是这样分开,在提交逻辑上就要麻烦点
    MRG0
        51
    MRG0  
    OP
       226 天前
    @justyeh 按钮只能到“支付方式”div,不能延伸到“支付方式”下边
    MRG0
        52
    MRG0  
    OP
       226 天前
    @asdjgfr #46 一打开,复杂度真吓到我了
    MRG0
        53
    MRG0  
    OP
       226 天前
    现在主要是两种方案:
    MRG0
        54
    MRG0  
    OP
       226 天前
    @MRG0 #53 1 ,使用想对布局,这样可以保留”循环数组“这一特点,就是调样式麻烦一点
    2 ,数据分两行,这样布局简单,但我不敢确定能否应对后端传回来的数组里的所有情况
    hevi
        55
    hevi  
       226 天前
    认同#49 ,数组第一个单独处理,二及之后 flex 完事
    hevi
        56
    hevi  
       225 天前
    如果用 tailwindcss ,可以参考

    ```
    <div class="flex h-screen w-screen items-center justify-center">
    <div class="w-[520px] p-8">
    <div class="mb-4 flex justify-between gap-4 border p-4">
    <div class="shrink-0 text-gray-600">支付方式</div>
    <div>
    <div class="flex justify-end mb-2">
    <div class="border border-blue-400 p-2 text-sm text-gray-600">按钮 11111111111111</div>
    </div>
    <div class="flex flex-wrap justify-end gap-4">
    <div class="border border-blue-400 p-2 text-sm text-gray-600">按钮 222</div>
    <div class="border border-blue-400 p-2 text-sm text-gray-600">按钮 333</div>
    <div class="border border-blue-400 p-2 text-sm text-gray-600">按钮 444</div>
    <div class="border border-blue-400 p-2 text-sm text-gray-600">按钮 555</div>
    </div>
    </div>
    </div>
    </div>
    </div>

    ```
    MENGKE
        57
    MENGKE  
       225 天前   ❤️ 2
    先排个序,然后 flex ,然后 [支付方式] 算第一条加进去,支付方式用 justify-self: flex-start ;其他的 flex-end;
    MRG0
        58
    MRG0  
    OP
       225 天前
    @hevi #56 如何快速入门 tailwindcss ,这些行内样式,给我整懵了
    hevi
        59
    hevi  
       225 天前
    @MRG0 对着官网,按/查想要的 style 属性,用多了就香了
    你可以复制前面那代码到 https://play.tailwindcss.com/ 去看看效果

    官网 https://tailwindcss.com/docs/installation
    大陆 https://www.tailwindcss.cn/docs/installation
    gerorge
        60
    gerorge  
       225 天前
    @LaGeNanRen 完全看不懂
    CHTuring
        61
    CHTuring  
       225 天前
    这和你什么布局都没关系,flex 也行 grid 也行,float 也行,只是对数量进行判断加 class 而已
    plasticman64
        62
    plasticman64  
       225 天前
    应该没有 FLEX 实现不了的布局
    MRG0
        63
    MRG0  
    OP
       225 天前
    @hevi #59 已加入书签
    hevi
        64
    hevi  
       225 天前
    @MRG0 额,你还可以这么写,第二个开始,前面加个 width:100%的元素,隔开,做到换行的效果。

    如果第二行开始需要两端对齐的话,那还是隔开处理吧。


    ```
    <div class="flex h-screen w-screen items-center justify-center">
    <div class="w-[600px] p-8">
    <div class="mb-4 flex justify-between gap-4 border p-4">
    <div class="shrink-0 text-gray-600">支付方式</div>
    <div class="flex-grow flex flex-wrap justify-end">
    <div class="border border-blue-400 p-2 text-sm text-gray-600 mb-2">按钮 11111111111111</div>
    <div class="w-full"></div>
    <div class="border border-blue-400 p-2 text-sm text-gray-600 mr-2">按钮 222</div>
    <div class="border border-blue-400 p-2 text-sm text-gray-600 mr-2">按钮 333</div>
    <div class="border border-blue-400 p-2 text-sm text-gray-600 mr-2">按钮 444</div>
    <div class="border border-blue-400 p-2 text-sm text-gray-600">按钮 55555555</div>
    </div>
    </div>
    </div>
    </div>

    ```
    pianjiao
        65
    pianjiao  
       225 天前
    先 js 判断返回值的列表里面按钮的长度,如果长的在上面 就洗一下数据,页面在根据 flex 获取 gird 来布局
    shoto
        66
    shoto  
       225 天前 via Android
    感觉没见个看懂你需求的。 去喷你们交互设计吧。设计的什么玩艺儿。缺心眼。
    长按钮一定要在第一行, 第二行要通到支付文 字下面。
    我能想到的就是 数组要按字符串长度排序, 然后 flex 主轴从下向上,按钮从右下开始对齐,从右向左排,向上折行。但长按钮一定保持在第一行没想到办法。 而且如果按钮超多会盖住 支付文字。支付文字做 div 背景层处理。
    zhw2590582
        67
    zhw2590582  
       225 天前
    哈哈,我还是没理解你的意思
    b0x
        68
    b0x  
       225 天前
    1. 通过 js, 根据按钮的内容长度对按钮的顺序进行排序, 从而决定哪个按钮出现在第一排.
    2. 剩下的事情 css 的 flex 搞定即可.

    另外,如果一组按钮的先后顺序是和按钮内容的长度有关,那么说明 UI 交互逻辑设计是有问题的.
    davin
        69
    davin  
       225 天前
    就是个原型图而已,设计师也不会直接这么设计的。问问你的设计师同事比较靠谱。
    RyougiShiki
        70
    RyougiShiki  
       225 天前
    不给 27 楼点个赞吗
    MRG0
        71
    MRG0  
    OP
       225 天前
    @RyougiShiki 狠狠的赞住了
    MRG0
        72
    MRG0  
    OP
       225 天前
    @shoto 唉,无奈,但现在还是实现了,把“支付方式”一并纳入 flex 布局
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2652 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 08:40 · PVG 16:40 · LAX 00:40 · JFK 03:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.