美文网首页
uview在字节小程序中grid宫格布局组件样式错乱问题

uview在字节小程序中grid宫格布局组件样式错乱问题

作者: 张大娃创业笔记 | 来源:发表于2022-04-27 10:26 被阅读0次

    原因:在编译字节小程序后自定义组件会多出一个层级,所以会导致样式失效问题
    这里有两种解决方式:

    方案一:

    <!-- 处理字节小程序自定义组件多一层嵌套导致uview布局组件失效问题 -->
    <!-- #ifdef MP-TOUTIAO -->
    <u-grid :border="false" col="4" customStyle="display: block;">
    <!-- #endif -->
    <!-- #ifndef MP-TOUTIAO -->
    <u-grid :border="false" col="4">
    <!-- #endif -->
      <u-grid-item customStyle="padding-top:20rpx;padding-bottom: 20rpx;">
        <u-icon :name="item.icon" :size="50"></u-icon>
        <text class="features-title">{{item.title}}</text>
      </u-grid-item>
    </u-grid>
    

    方案二:

    <u-grid :border="false" col="4">
    <!-- 处理字节小程序自定义组件多一层嵌套导致uview布局组件失效问题 -->
      <u-grid-item style="width: calc(100%/4);"
                    customStyle="padding-top:20rpx;padding-bottom: 20rpx;width:100%;">
        <u-icon :name="item.icon" :size="50"></u-icon>
        <text class="features-title">{{item.title}}</text>
      </u-grid-item>
    </u-grid>
    

    相关文章

      网友评论

          本文标题:uview在字节小程序中grid宫格布局组件样式错乱问题

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