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

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

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


## 一、Page中使用vant组件

pages/home.wxml

```html

<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

```css

.page-home__article{

  // 简单的例子,隐藏下划线

 .van-tabs__line {

     display: none;

   }

}

}

```


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

components/custom-component/custom-component.wxml


```html

<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>

```

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


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

```json

{

 "component": true,

 "styleIsolation": "apply-shared"

}

```


参考: [自定义组件 / 组件样式隔离](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB)


在page中使用自定义组件


pages/home.wxml

```html

<view class="page-home__article">

<custom-component></custom-component>

</view>

```


在外层加一个作用域,可直接修改vat组件样式

pages/home.wxss

```css

.page-home__article{

  // 简单的例子,隐藏下划线

 .van-tabs__line {

     display: none;

   }

}

}

```


## 总结

vant组件样式修改方式:

- 全局样式app.wxss中修改

- 页面样式page.wxsss中修改

- 自定义组件样式中修改不一定生效

目录
相关文章
|
29天前
|
JSON 小程序 前端开发
终于搞懂了!微信小程序的渲染机制及组件使用
【8月更文挑战第8天】微信小程序的渲染机制及组件使用
64 3
终于搞懂了!微信小程序的渲染机制及组件使用
|
11天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
|
22天前
|
人工智能 小程序 编译器
Ant Design Mini 问题之Antd Mini 使用小程序函数式组件(functional-mini)来确保组件逻辑适配到双端,如何实现
Ant Design Mini 问题之Antd Mini 使用小程序函数式组件(functional-mini)来确保组件逻辑适配到双端,如何实现
|
22天前
|
小程序 前端开发 API
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
|
26天前
|
小程序
|
1月前
|
移动开发 JavaScript 开发工具
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
|
2月前
|
小程序
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异
|
2月前
|
小程序
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
131 0
|
18天前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
212 65
|
11天前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `&lt;swiper&gt;` 实现,二是利用 Nut UI 的 `&lt;nut-swiper&gt;` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
下一篇
DDNS