网站首页编程语言正文

vant tab组件动态改变van-tab title后显示不全问题，需要手动滑动

作者：我总是词不达意更新时间： 2022-09-22 编程语言

鉴于百度搜索不到vant官方网址，分享一下vant组件库官网地址，方便新手使用

vant官网地址 Vant 3 - Mobile UI Components built on Vue

这几天在做一个h5移动端商品筛选搜索功能，用的vant的tab组件和popup组件实现的，实现后是了测试，测试人员测试登记为可优化问题，最后一个tab标签如果改变文字内容后文字过长就无法完全显示，需要手动向左滑动一下，才可完全显示。

原图与选择后对比图

解决思路

1.先去看vant 官方tab组件文档

tabs 里有一个重绘的方法，果断拿来试了试

html代码

<van-tabs
  ref="tabResize"
  v-model="tabsActive"
  line-width="0"
  line-height="0"
  background="#f9f9fb"
  title-active-color="#fff"
  title-inactive-color="#000"
  swipe-threshold="3"
>
   <van-tab
	 v-for="(item, index) in conditionsList"
	 :key="index"
	 :title-class="{ 'temporary-style': index == 7 }"
	  >
    	<template #title>
			<div @click="onTabClick(item, index)">
				<span v-text="conditionsText(item)"></span>
				<van-icon name="arrow-down" />
			</div>
		</template>
	</van-tab>
</van-tabs>

js代码

用的js的switch判断是最后一个筛选项

type === 'add'代表是选中要筛选的文字内容并且点击了确认按钮

case 'sortType':
 if (type === 'add') {
  this.$refs.tabResize.resize() //调用vant tab组件的resize方法
} 
break

附上效果图

实际效果

并没有效果，tab没有重绘，所以此方式行不通

有效解决办法

因为我用了tab的标签栏滚动，代码请往上翻

所以我想到一个办法，因为我的tab数据是一个数组对象，那我就每次是点击最后一个并且是选中点击确定后，往数组对象中push一个任意值，它自然就会像左滑动，并且显示完全，在用js的setTimeout延迟删除这个push项，代码如下：

html代码

<van-tabs
  ref="tabResize"
  v-model="tabsActive"
  line-width="0"
  line-height="0"
  background="#f9f9fb"
  title-active-color="#fff"
  title-inactive-color="#000"
  swipe-threshold="3"
>
   <van-tab
	 v-for="(item, index) in conditionsList"
	 :key="index"
	 :title-class="{ 'temporary-style': index == 7 }"
	  >
    	<template #title>
			<div @click="onTabClick(item, index)">
				<span v-text="conditionsText(item)"></span>
				<van-icon name="arrow-down" />
			</div>
		</template>
	</van-tab>
</van-tabs>

上图有一个关键点，因为我的数组对象原先长度是7，那我增加后数组长度就为8，这里说一下数组长度从0开始，所以图中判断的是index===7，那我们就针对加入后的最后一项做处理，因为最后一项是我们临时添加的，所以不需要它展示出来，只为为了解决最后一个tab值改变后展示不全问题，给它动态绑定一个class

css代码

通过vant tab的props

:title-class="{ 'temporary-style': index == 7 }"

// <style lang="stylus">

.temporary-style
   width: 0
   padding: 0
   background: transparent

   div
    display: none

js代码

conditionsList为tab数组对象

conditionsList.length === 8代表已经添加过一次临时数据，因为我的原数组长度是7

conditionsList.pop() 删除最后一项临时添加的数据

conditionsList.push('temporaryItem') 临时添加的数据

case 'sortType':
 if (type === 'add') {

  //为解决最后一个选中数据后文字过长展示不全问题
 if (conditionsList.length === 8) {
  conditionsList.pop()

  //这里使用setTimeout的意思是，防止多次push同一个值，始终保持原数组的长度
  setTimeout(() => {
   conditionsList.pop()
   this.$forceUpdate()
  }, 100)
 }
  conditionsList.push('temporaryItem')
}
break