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

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

作者: 吉凶以情迁 | 来源:发表于2022-04-02 15:19 被阅读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 就补上。否则会导致最后一排不是靠左边对齐就感觉很丑。

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/vbnpjrtx.html