问题描述
如何在小程序实现一个顶部导航标签栏并展示对应页面内容?
当我们在一个小程序中想要查看某些信息,总是以页面顶部的一个导航栏展示出来,点击该导航栏上的各个标签则会出现对应页面内容。而如何实现顶部的标签导航,则需要我们引入dist中的tab组件。
解决方案
(1)在json中引入tab组件。
表3.1 tab组件引入
{
"usingComponents": {
"van-tab": "/dist/tab/index",
"van-tabs": "/dist/tabs/index"
}
}
(2)wxml中的内容。
通过active设定当前激活标签对应的索引值,默认情况下启用第一个标签。
表3.2 wxml代码示例
<van-tabs active="{{ active }}" bind:change="onChange">
<van-tab title="正在热映">内容 1</van-tab>
<van-tab title="搜索">内容 2</van-tab>
<van-tab title="分类">内容 3</van-tab>
</van-tabs>
(3)js中设置切换标签页。
表3.3 js代码示例
Page({
data: {
active: 1
},
onChange(event) {
wx.showToast({
title: `切换到标签 ${event.detail.name}`,
icon: 'none'
});
}
})
(4)效果图
图3.1 效果图
结语
在设置一个信息展示页面时,用顶部标签导航让我们的页面跳转更便捷。同样我们可以在页面中设置我们需要的内容。
END实习编辑 | 王楠岚
责 编 | 吴怡辰
where2go 团队
微信号:算法与编程之美
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。