问题描述
在使用小程序的时候会看到大多数都是在小程序的底部设置导航栏，然而会发现有一些小程序的顶部也会有导航栏，那么如何来设置小程序的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 团队
微信号：算法与编程之美
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
