评论

多行view两端对齐的一个思路

一个view多行两端对齐的巧妙解决办法

今天在做一个项目的时候要用到view的两端对齐,想了各种思路,在网找了很多代码片段,始终都觉得太过麻烦。无意中一个巧妙的方法解决了困扰我的难题。


实现效果如下:


可以看到无论是多少个内容,都能自动两端对齐。特别是最后一行不足的情况下。

其实也没多高大上的,就是偷了一个懒,在最后补齐不足的内容。

代码如下:

<view class="sp_top_40 hc_row_1 fileGroupOuter">
    <view class="GroupTitleRow">
        <view class="title">标题标题</view>
    </view>
    <view class="Group">
        <view class="GrupItem" wx:for="{{ListItems}}">
            <view class="GroupIcon hcfont hc-ppt"></view>
            <view class="GroupText">很题文题文题文题文题文题文件{{index * 5}}</view>
        </view>
        <view wx:for="{{4 - ( ListItems.length % 4 ) }}" class="GrupItem" />
    </view>
</view>


我这里是一行最多排4个,所以最后用了4减去总内容个数除以4的余数,就是剩下的不足的个数。

还有一个无脑的方法就是不管最后剩下多少个,你只需要按最大的补齐,

<view wx:for="{{4}}" class="GropItem"  style="height:0rpx"/>
最后一次编辑于  2022-03-12  
点赞 0
收藏
评论

1 个评论

  • 15
    15
    2022-03-12

    机智的老哥

    2022-03-12
    赞同
    回复
登录 后发表内容