问题描述 在使用小程序的时候会看到大多数都是在小程序的底部设置导航栏,然而会发现有一些小程序的顶部也会有导航栏,那么如何来设置小程序的Tab标签页呢? 解决方案 Tab标签页是在小程序的顶部的一个导航栏,当点击它时会弹出属于这个标签的相应内容。需要vant组件库,将dist提前下载好然后保存到项目中。在小程序中调用组件库,并在正确引用就可以实现了。 1.在json中调用van-tab组件。
表 1 json代码 2.在js中对标签页的切换进行设置。 title:设置切换标签时弹出的提示框; icon:设置提示框的图标。
表 2 js代码 3.在wxml中实现。 通过active设定当前激活标签对应的索引值,默认情况下启用第一个标签。可以用type来设置标签栏的形式,name设置标签名称,title标题等。
表 3 wxml代码 图 1 效果图 实习编辑 | 王文星 责 编 | 江汪霖 where2go 团队 |
|