微信小程序|Tab标签页

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章

问题描述

在使用小程序的时候会看到大多数都是在小程序的底部设置导航栏，然而会发现有一些小程序的顶部也会有导航栏，那么如何来设置小程序的Tab标签页呢？

解决方案

Tab标签页是在小程序的顶部的一个导航栏，当点击它时会弹出属于这个标签的相应内容。需要vant组件库，将dist提前下载好然后保存到项目中。在小程序中调用组件库，并在正确引用就可以实现了。

1.在json中调用van-tab组件。

{

  "navigationBarTitleText": "查看启动日志",

  "usingComponents": {

        "van-tab": "/dist/tab/index",

        "van-tabs": "/dist/tabs/index"

  }

}

表 1 json代码

2.在js中对标签页的切换进行设置。

title：设置切换标签时弹出的提示框；

icon：设置提示框的图标。

Page({

  data: {

    active: 1

  },

 

  onChange(event) {

    wx.showToast({

      title: `切换到 ${event.detail.name}`,

      icon: 'none'

    });

  }

});

表 2 js代码

3.在wxml中实现。

通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签。可以用type来设置标签栏的形式，name设置标签名称，title标题等。

<van-tabs  type="card" active="{{ active }}" bind:change="onChange">

  <van-tab title="推荐">123</van-tab>

  <van-tab title="景点">内容 2</van-tab>

  <van-tab title="我的">内容 3</van-tab>

</van-tabs>

表 3 wxml代码

图 1 效果图

END

实习编辑 | 王文星

责 编 | 江汪霖

where2go 团队

微信号：算法与编程之美

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！