小程序中修改自定义组件的样式的几种方式

朴灿烈づ我的快乐病毒、 2022-10-16 03:00 113阅读 0赞

自定义组件中的代码  
wxml中：

<view class="headerBox">
      <text class="header-item">IN-SHOOT</text>
      <navigator class="header-item" url="../../pages/index/index">首页</navigator>
      <navigator class="header-item" url="../../pages/discover/discover">发现</navigator>
    </view>

js中：

Component({ 
      options: { 
      // 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式会影响到他的自定义组件。
        addGlobalClass: true,
      }
    })

父页面中

.headerBox{ width: 100%; display: flex;height: 60rpx;line-height: 60rpx;padding-left: 20rpx;position: absolute;
      top: 0;left: 0;z-index: 10;background-color: rgba(185, 181, 181, 0.3);color: #999999;}
    .header-item{ margin-right: 20rpx;font-size: 30rpx;}

第二种  
在自定义组件中的js暴露出来class

Component({ 
      externalClasses: ['headerBox','header-item']
    })

父页面中

还有很多方法详情可以移步至官方文档  
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

注意 如果你使用了上述方法还是无法实现  
你可以真机调试运行一下。  
例如 （编辑器和真机运行的效果会不一样！！！）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/952f839a205a41d3bb2e0665ab6702b3.png