【已解决】uniapp使用vant-ui中的tab标签页的时候，发现底下红色的切换线不见了

已于 2023-09-08 11:12:35 修改
阅读量849 收藏 1
点赞数 1
分类专栏： uniapp学习笔记 报错问题解决 文章标签： uni-app ui
于 2023-09-08 11:11:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44912902/article/details/132756220
版权

问题截图

在这里插入图片描述
在这里插入图片描述

解决办法

按F12查看vant-ui源码你会发现他的Tab标签页里面有个width，但是我们引入到uniapp之后发现width没有了（不知道什么情况，可能是兼容问题吧）

在这里插入图片描述

所以我们解决的办法，只需要在App.vue中给全局.van-tabs__line添加width宽度即可解决！

::v-deep .van-tabs__line{
	width: 40px !important;
}

在这里插入图片描述

成功显示红线

在这里插入图片描述

令人作呕的溏心蛋
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vant-weapp-uniapp:vant-weapp的uniapp演示（仅微信小工具）
05-09
VantUI Uniapp 示例 本示例原本是从vant官方发布的微信演示示例转换而来,支持微信小程序（H5不支持！！）。 vant-weapp版本为1.6.7. vant weapp的组件库，都在工程的wxcomponents目录下。pages目录下是各个示例页面。 图片上传服务 提供了图片Nodejs服务 ，代码路径为\src\node-image-upload-server 安装npm包 npm install 运行服务 node app 感谢 本示例参考了依据官网增加了新控件的使用示例。 :fire: 更新日志 1.2.2(2021-01-30) 升级版本至1.6.7，增加新功能示例（自定义属性示例），优化原有功能。 1.1.0(2020-04-30) 升级版本至1.2.1，增加新功能示例，优化原有功能。 1.0.0(2020-02-19) 支持H5模式编译。
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vant-ui框架的一个bug(解决切换后onload不触发)
01-22
前几天做的项目里有用到下拉刷新。使用了vant-ui里的 List 列表 瀑布流滚动加载，用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法。（我使用了第三种，全局引入方法） 方式一. 使用 babel-plugin-import (推荐) babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装 babel-plugin-import 插件 npm i babel-plugin-import -D // .babelrc 中配置 //
从0到1构建uniapp应用-创建标签页Tabs
最新发布
xrl2012的专栏
04-03 769
一般微信小程序的底部都有4个或5个标签页，给用户以导航的操作。 此文将创建两个标签页面用来演示如何创建底部标签页面。
uniapp实现tabs标签页滑动，使用scroll-view 和swiper
LJ_James_的博客
10-15 1999
【代码】uniapp实现tabs标签页滑动，使用scroll-view 和swiper。
uni-app开发微信小程序自定义标签页跳转问题记录
weixin_46605945的博客
11-10 96
问题描述：实现自定义标签页后，在跳转时，图标激活状态无法实时更新，需要点击两次后图标才会切换激活状态。解决方案：在使用自定义标签页组件的页面中，在生命周期onshow时，切换图标激活。原实现方案：在图标的点击事件中实现页面跳转和数据绑定；原因：俺也不晓得，才开始学习。
Uni-APP标签
小菜鸟的博客
11-24 8355
Uni-APP Uni-app是一个跨平台的开发框架，学会Uni-APP之后可以跨发除iOS，Android，h5，以及各种小程序的应用，不需要再去学习其他应用的框架 uni-app常用开发软件 对uni-app比较友好的软件 微信开发者工具 下载微信小程序的使用工具 创建项目 打开hbuilderx 创建项目选择uni-app选项 创建好一个项目后点击运行到谷歌 运行在微信小程序的时候需要先配置路径 并且在设置中打开端口号才行 这样环境都配完之后就可以运行了 目录文件 pages 存放所有
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-06 2055
话不多说，先看下问题描述：使用uni-app开发微信小程序项目，使用的是Vant Weapp实现Tab标签页。要实现跳转过来，显示默认的当前tab。
底部导航栏进入详情页不显示
Aa__Ki的博客
09-30 1139
在写移动端项目的时候，一般情况下一级页面是需要底部导航的，所以说就有些页面是不需要底部导航条的，比如说，详情页就不得要底部导航。 利用路由元（meta）设置参数 先创建底部的导航栏 在conponents文件夹下面创建Tabbar.vue,我用的是vant的Tabbar组件 <div class="tabbar"> <van-tabbar v-model="active" :placeholder="true" safe-area-inset-bottom route>
uniapp引入 vant
热门推荐
weixin_37391237的博客
03-15 1万+
2.创建 uniapp 项目,在根目录下新建 一个文件夹wxcomponents ，将下载好的压缩包中的 dist 文件夹放到 wxcomponents 里, 推荐将 dist 重命名为 vant,方式二：通过npm install 方式引入 npm i @vant/weapp -S --production。下载对应版本的压缩包,将文件解压后备用,确保下载的压缩包里有dist 文件夹。4.在pages.json页面将vant的组件注册到对应的页面。一、下载vant源码。
vue3中处理非tab页不显示底部tabbar
qq_35191010的博客
05-08 929
vue3中统一解决非tab页不显示底部tabbar
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vant-mall-tpl:vant-ui商城模板
05-15
先锋商城 项目设置 npm install 编译和热重装以进行开发 npm start 编译并最小化生产 npm run build:prod
uni-app常用标签详解
m0_74831742的博客
06-17 5622
view>
Uniapp Tab栏切换
Shivy_的博客
02-23 6122
介绍 在uniapp当中 , 制作 Tab栏, 当点击对应的标题时, 下面的内容对应跟着改变。 效果图 主要代码 html 部分代码 <view class="tab_nav"> <view class="navTitle" v-for="(item,index) in navList" :key="index" > <view :class="{'active':isActive === index}" @click="checked(index)">
uni-app 11设置备注和标签页
ab的博客
09-06 1141
设置备注页 user-tag-set.nvue <template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="设置备注和标签" showBack :showRight="true"> <free-main-button name="完成" slot="right" @click="submit"></free-main-button> <.
uniapp多端插件：Tabs标签页 灵活配置 多端兼容 简单易用（与element-ui的Tabs 标签页使用一致）
qq_42961150的博客
09-15 3947
在做项目的过程中用到了tab切换，本想着去插件市场找一个直接现用，后面发现找到的tab切换并不是我想要的那种使用方式，于是我结合了element-ui中Tabs标签页的方式写了该组件
uni_app组件实现tab选项卡滑动切换，支持默认选中，vue3+ts+setup
u012941592的博客
09-23 3743
最近开发小程序，需要用到tabs组件，在标签多的时候，可以左右滑动。tabs接受的参数props，tablist是父组件传递过来的tab数组，defaultsSelectIndex默认选中的第几个tab。主要能力：选中的tab会自动移动到组件的中间位置，支持默认选中第几个tab，可联动获取数据，支持和swiper联动使用。希望本篇文章对你有所帮助，我也是根据自己的需求封装的，你也可以根据自己的需求在该代码上进行优化。select选中的tab暴露给父组件的方法。主要方法：scroll-view。
element的tab，循环中下划线不显示的问题
weixin_67849181的博客
03-01 590
使用tabs循环后，只有第一个tab页有下划线，其余的tab页没有下划线。给name添加一个空字符串。
uniapp使用Vant-weapp
05-24
Uniapp 是一个基于 Vue.js 的跨平台开发框架，可以用它来快速构建小程序、H5、App 等多个平台的应用。而 Vant-weapp 是一款基于微信小程序的 UI 组件库，提供了丰富的组件和样式，可以大大提升开发效率。 在 Uniapp 中使用 Vant-weapp，需要先将 Vant-weapp 中的组件转化为 Uniapp 中的组件。具体步骤如下： 1. 安装 Vant-weapp 可以通过 npm 或者下载源代码的方式安装 Vant-weapp。这里以 npm 安装为例： ``` npm i vant-weapp -S --production ``` 2. 将 Vant-weapp 转化为 Uniapp 组件 Uniapp 的组件和微信小程序的组件略有不同，需要将 Vant-weapp 中的组件转化为 Uniapp 中的组件。可以使用 `mpvue-entry` 工具来实现： ``` npm i mpvue-entry -D ``` 然后在 `build` 目录下创建一个 `mpvue.config.js` 文件，将以下代码复制进去： ```js const MpvueEntry = require('mpvue-entry') module.exports = { pages: MpvueEntry.getEntry('src/pages/**/*.vue') } ``` 这样就可以将 Vant-weapp 中的组件转化为 Uniapp 中的组件了。 3. 在页面中使用 Vant-weapp 组件 在页面中引入 Vant-weapp 组件时，需要在 `script` 标签中使用 `import` 引入： ```html <template> <!-- 这里使用 Vant-weapp 的搜索框组件 --> <van-search /> </template> <script> import { VanSearch } from 'vant-weapp' export default { components: { VanSearch } } </script> ``` 这样就可以在 Uniapp 中使用 Vant-weapp 组件了。需要注意的是，在使用 Vant-weapp 组件时，需要将组件名从 `van-` 前缀改为 `Van`，例如 `van-search` 改为 `VanSearch`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

令人作呕的溏心蛋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值