微信小程序-tab选项卡

最新推荐文章于 2023-03-02 17:52:00 发布

原创

最新推荐文章于 2023-03-02 17:52:00 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

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

目的：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": 
  "腾讯综艺" 
 
   }, 
 
   {