微信小程序：VantWeapp组件Tab 标签默认样式修改

2024年5月31日 372次阅读 来源: 彭世瑜

组件文档提供了好几种方式来修改样式，根据实践，整理如下

一、Page中使用vant组件

pages/home.wxml

<view class="page-home__article">
	<van-tabs active="{ { active }}" bind:change="onChange">
	  <van-tab title="标签 1">内容 1</van-tab>
	  <van-tab title="标签 2">内容 2</van-tab>
	  <van-tab title="标签 3">内容 3</van-tab>
	  <van-tab title="标签 4">内容 4</van-tab>
	</van-tabs>
</view>

在外层加一个作用域，可直接修改vat组件样式
pages/home.wxss

.page-home__article{ 
   // 简单的例子，隐藏下划线 .van-tabs__line { 
      display: none;
    }
 }
}

二、自定义组件中使用vant组件

components/custom-component/custom-component.wxml

<view class="custom-component">
	<van-tabs active="{ { active }}" bind:change="onChange">
	  <van-tab title="标签 1">内容 1</van-tab>
	  <van-tab title="标签 2">内容 2</van-tab>
	  <van-tab title="标签 3">内容 3</van-tab>
	  <van-tab title="标签 4">内容 4</van-tab>
	</van-tabs>
</view>

此时在组件内容修改样式好像不起作用

组件配置需要开启样式选项

{ 
  "component": true,
  "styleIsolation": "apply-shared"
}

参考: 自定义组件 / 组件样式隔离

在page中使用自定义组件

pages/home.wxml

<view class="page-home__article">
	<custom-component></custom-component>
</view>

在外层加一个作用域，可直接修改vat组件样式
pages/home.wxss

.page-home__article{ 
   // 简单的例子，隐藏下划线 .van-tabs__line { 
      display: none;
    }
 }
}

总结

vant组件样式修改方式：

  • 全局样式app.wxss中修改
  • 页面样式page.wxsss中修改
  • 自定义组件样式中修改不一定生效
    原文作者：彭世瑜
    原文地址: https://blog.csdn.net/mouday/article/details/121740935
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞