小程序+vant之使用tabs底部条位置错误

贼猫子

已于 2022-08-12 14:33:04 修改

阅读量2.8k

点赞数

分类专栏：小程序文章标签：小程序

于 2022-03-22 17:12:56 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41700532/article/details/123664866

版权

本文主要讨论了在小程序中使用 vant 的 tabs 组件时，遇到底部条位置错误的问题，特别是在数据动态加载的情况下。官方提供了解决方案，但可能因版本或封装问题导致失效。文中提到在组件嵌套使用时，wx:if 的正确使用及 active 参数类型选择（推荐使用 number 而非 string）对于避免此类问题的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说明，这种tabs底部条位置错误一般是出现在tabs选项卡数据是动态数据的情况。

先上官方给出的解决办法【官方文档链接】：

官方解释
喏，很多时候，官方给出的就能解决问题了，第二种不太建议用，可能是版本问题吧，每次我想尝试第二种方法，我的控制台都在报没有resize这个方法！我打印了下，还真是没有。。。

但有时候因为某些引用封装的问题，两种都不行；

我在b组件页面中使用van-tabs，然后在a页面引用这个组件，并且用了template作为中间层承载这个组件，大概代码如下吧，至于为什么那么麻烦，因为不想写那么多if else。

a页面【wxml】
<import src="../../../template/xxx/index.wxml" />
<view hidden="{
  {isHide}}">
	<template is="temName" />
</view>
【json】
{
  "usingComponents": {
    "bPages":"/xxxx/index",
  }

template模板【wxml】
<template name="temName">
	<bPages /

最低0.47元/天解锁文章