【微信小程序】vant组件库的tab标签页展示（优化代码）_van-tab

前言

近期使用微信小程序原生技术，搭配vant组件库进行组件开发，其中在标签页以及其下内容的展示，发现了一些可优化的地方。

1、Vant组件库

官方组件文档：

Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

官网Tab标签页案例展示

 内容 1 内容 2 内容 3 内容 4import { ref } from \'vue\';export default { setup() { const active = ref(0); return { active }; },};

2、业务需求

问题

我目前的标签页数据有八条

如果按官网上的例子，不进行优化的话，那么我的代码就是如下：

 内容 1 内容 2 内容 3 内容 4 内容 5 内容 6 内容 7 内容 8

问题：

大量的重复代码

如果标签页里面的内容如果定制化，那么可阅读性和可维护性也比较差

我的需求：

标签下是卡片信息列表，基本的结构是相同的。

那么就可以考虑遍历渲染标签页。

标签页的内容可以用模板进行渲染，处理好传递的入参即可。

 最终代码呈现

html文件

<van-tabs active=\"{{active}}\" bind:change=\"onChange\" swipe-threshold=\"3\" > <block wx:for=\"{{typeList}}\" wx:key=\"name\"> <van-tab title=\"{{item.title}}\" name=\"{{item.name}}\"> <template is=\"sceneryList1\" data=\"{{sceneryData: typeData, isAscending}}\">     <view wx:for=\"{{sceneryData}}\" wx:key=\"id\" class=\"Textcontainer\"> <van-card type=\"{{item.type}}\" title=\"{{item.name}}\" thumb=\"{{item.pic[0]}}\" desc=\"{{item.title}}\" desc-class=\"desc-class\" >  <van-button size=\"mini\" bindtap=\"toDetail\" data-id=\"{{item.id}}\">查看详情    

css文件

/* 卡片容器 */.Textcontainer{ background-color: #b1b3b4; border-bottom:3rpx solid gray; border-radius: 2rpx; */}/* 景点描述 文本溢出控制 */.desc-class { display: -webkit-box; -webkit-line-clamp: 1; /* 控制显示的行数 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}/* 查看详细 */.box_bottom{ position: relative;}

js文件（功能和数据）

 data: { active: \"红色文化\", typeList:[ { title:\"红色文化\", name:\"红色文化\" }, { title:\"xx文化\", name:\"xx文化\" }, { title:\"xx3\", name:\"xx3\" }, { title:\"xx4\", name:\"xx4\" }, { title:\"xx5\", name:\"xx5\" }, { title:\"xx6\", name:\"xx6\" }, { title:\"xx7\", name:\"xx7\" }, { title:\"xx8\", name:\"xx8\" } ], //标签页 typeData:[], //存储标签页下的内容数据 }, // 点击事件 toDetail(event) { //书写功能逻辑... },

展示效果

（业务数据敏感，进行了打码）

3、小结

用“遍历渲染”对vant组件库官方提供的例子进行优化，解决业务需求使用的代码量多，且复杂难以维护的问题。

有问题可以进行评论~

如果你喜欢这篇文章，请三连~