微信小程序：动态修改自定义组件中vant-tab选中标签的大小并加粗标签-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序：动态修改自定义组件中vant-tab选中标签的大小并加粗标签。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.在自定义组件的wxss文件里添加如下代码，此处还可以改变字体颜色之类的：

.van-tab--active {

  font-weight: bold !important;

  font-size: 34rpx !important;

}

2.在自定义组件的json文件中修改组件样式隔离模式：

"styleIsolation": "shared"

3.还遇到一个天坑的问题，这个自定义组件必须放在父组件的第一个引用位置，否则无法生效。我之前tab组件在upload组件的下面，导致一直无法生效。

"usingComponents": {
    "tab":"/components/tab/tab",
    "upload":"/components/upload/upload"
  }

4.这里贴出自定义tab组件的代码及实现效果

<!--components/tab/tab.wxml-->
<view class='tab'>
<!-- 此处的color是下划线的颜色 -->
  <van-tabs class='tabs' ellipsis='{{false}}' active="{{activeIndex}}" color="#3a3a3a" line-width='50rpx' bind:change="change">
    <van-tab wx:for="{{list}}" wx:key="index" title="{{item.name}}"></van-tab>
  </van-tabs>
</view>

.tab{
  /* 未选中标签题目的颜色 */
  --tab-text-color: #777777;
  /* 选中标签题目的颜色 */
  --tab-active-text-color: #3A3A3A;
  /* 背景颜色 */
  --tabs-nav-background-color: white;
  /* 标签字体大小 */
  --tab-font-size: 30rpx;
  /* 下划线模式整个标签的高度 */
  --tabs-line-height: 80rpx;
  /* 下划线的宽度 */
  --tabs-bottom-bar-height: 6rpx;
  width: 750rpx;
}

/* 选中的tab标签的class */
.van-tab--active {
  font-weight: bold !important;
  font-size: 34rpx !important;
}

微信小程序：动态修改自定义组件中vant-tab选中标签的大小并加粗标签,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-741992.html