Uni-App Vue下实现页面tabs组件分类循环查询

VIP文章 EinPenPen

已于 2022-03-01 22:04:06 修改

阅读量1.1k

点赞数 1

分类专栏：前端开发文章标签： vue.js 分类前端

于 2022-03-01 22:02:19 首次发布

本文链接：https://blog.csdn.net/PlatoPuPu/article/details/123215006

版权

开发环境为Uni-App

主要需要实现的功能，在当前页面载入之后通过fetch获得后台数据，但在当前页面需要按照tabs分类展示，而不是一股脑的用block v-for进行列表循环展示。

tabs作为非常常用的组件，实现不再这里赘述，主要使用nav, currentTab等功能。示例：

<tui-tabs :tabs="navbar" :currentTab="currentTab>4?0:currentTab" 
@change="change" :size="26" bottom="50%" :backgroundColor="backgroundColor" color="#39A692" selectedColor="#fff" 
:sliderWidth="140" :sliderHeight="52" :sliderBgColor="backgroundColorBar" :unlined="true":itemWidth="(100/navbar.length)+'%'">
</tui-tabs>

重点方法在于：

1. list view class中使用v-if，对应的在change方法中通过switch方式来实现；

2. 在fetch方法中，将从数据拉取的所有