微信小程序gridview flex布局 居中对齐末尾空缺巧妙解

2022-04-02  本文已影响0人  吉凶以情迁
    <view class="item-container">
        <view class="item" wx:for="{{item}}" wx:key="id" id="{{item.id}}" data-index="{{index}}" catchtap='itemClick' data-model='{{item}}'>
            <view class="menu">
                <image class="menu-icon" src="{{item.icon_url}}" style="background-color:{{item.color}};"></image>
                <text class="menu-title">{{item.title}}</text>
            </view>
        </view>
        <block wx:if="{{ (item.length%3==1)}}">
            <view class="item"> </view>
        </block>
        <block wx:if="{{ (item.length%3==2)}}">
            <view class="item"> </view>
        </block>
    </view>

这里的案例是3列, 如果空缺 1 或者2 就补上。否则会导致最后一排不是靠左边对齐就感觉很丑。

上一篇 下一篇

猜你喜欢

热点阅读