欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
欢迎加入团队圈子！与作者面对面！直接点击！
问题描述
在使用小程序的时候会看到大多数都是在小程序的底部设置导航栏，然而会发现有一些小程序的顶部也会有导航栏，那么如何来设置小程序的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 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！