微信小程序-tab选项卡

最新推荐文章于 2025-06-02 09:54:28 发布

黑猫中校

最新推荐文章于 2025-06-02 09:54:28 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/tang1392/article/details/78481887

本文介绍了如何在微信小程序中创建tab选项卡，涉及到的知识点包括flex布局、数据绑定、条件渲染、列表渲染和事件处理。通过在data中定义数据，然后在wxml中进行布局和绑定，js中添加点击事件，以及简单的wxss样式，实现了选项卡的切换功能。源代码可在提供的Gitee链接中获取。

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

目的：tab选项卡

知识点：

1、flex布局；

2、数据绑定；

3、条件渲染；

4、列表渲染；

5、事件；

第一步：设置json数据

由于都是自己本地写，没用接口数据，所以在data里面自己写了一个数据：

   data:{ 
   
  "tabView":[ 
 
   { 
   
  "id": 
  10001, 
 
  "title": 
  "优酷视频", 
 
  "tree":[ 
 
   { 
   
  "id": 
  10001001, 
 
  "title": 
  "优酷综艺" 
 
   }, 
 
   { 
   
  "id": 
  10001002, 
 
  "title": 
  "优酷电影" 
 
   }, 
 
   { 
   
  "id": 
  10001003, 
 
  "title": 
  "优酷电视剧" 
 
   } 
 
   ] 
 
   }, 
 
   { 
   
  "id": 
  10002, 
 
  "title": 
  "腾讯视频", 
 
  "tree": [ 
 
   { 
   
  "id": 
  10002001, 
 
  "title": 
  "腾讯综艺" 
 
   }, 
 
   {