【原】微信小程序|顶部导航标签栏

问题描述

如何在小程序实现一个顶部导航标签栏并展示对应页面内容？

当我们在一个小程序中想要查看某些信息，总是以页面顶部的一个导航栏展示出来，点击该导航栏上的各个标签则会出现对应页面内容。而如何实现顶部的标签导航，则需要我们引入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 团队

---

微信号：算法与编程之美