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

46 篇文章 1 订阅
4 篇文章 0 订阅

鉴于百度搜索不到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

最终效果对比图

 

 

 完全显示,到此结束。

如有更好的解决办法,欢迎指出,谢谢!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值