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

张大娃笔记

于 2022-04-27 10:19:24 发布

阅读量1.1k

点赞数

分类专栏： uniapp 文章标签： javascript vue

本文链接：https://blog.youkuaiyun.com/weixin_38333426/article/details/124444609

版权

uniapp 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在编译字节小程序后，由于自定义组件出现额外层级导致的样式失效问题。为了解决这个问题，文章提供了一种解决方案，即通过条件编译指令（ifdefMP-TOUTIAO）适配不同平台，确保uview布局组件在字节小程序中正常工作。修复方法包括在特定平台下调整组件宽度以匹配预期样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因：在编译字节小程序后自定义组件会多出一个层级，所以会导致样式失效问题

<u-row justify="space-between" customStyle="padding: 0 30rpx;margin-bottom:30rpx">
  <!-- 处理字节小程序自定义组件多一层嵌套导致uview布局组件失效问题 -->
  <!-- #ifdef MP-TOUTIAO -->
  <u-col span="3" style="width: 100%;" customStyle="width:100%">
  <!-- #endif -->
  <!-- #ifndef MP-TOUTIAO -->
  <u-col span="3">
    <!-- #endif -->
    <view class="digital-item">
        <view class="digital-num">
            <text>666</text>
        </view>
        <view class="digital-label">
            <text>关注</text>
        </view>
    </view>
  </u-col>
</u-row >