专栏首页算法与编程之美微信小程序|顶部导航标签栏

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

问题描述

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

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

实习编辑 | 王楠岚

责 编 | 吴怡辰

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:吴怡辰

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 开发|走进小程序(三)

    前一篇博客为大家简单的讲解了一下关于一个简单的电商小程序的首页和分类页面的制作。这篇博客呢,继续为大家讲解后面搜索页、详情页、购物车页面的制作。

    算法与编程之美
  • 深入理解JSP(一)

    在Java Web的开发过程中,可能有过这样的疑问,Tomcat是一个Servlet运行环境(容器),所有经过Tomcat的请求都是由一个Servlet来处理的...

    算法与编程之美
  • 数学|如何求解线性方程系数?

    线性方程在生活的出现的比例很高,很多地方都可以出现它的身影。这些方程都是通过对实际数据的分析处理得来的,那么这些方程到底该如何确定呢?就像下面的散点图,如何通过...

    算法与编程之美
  • 源码分析Dubbo 泛化调用与泛化实现原理

    通常是服务调用方没有引入API包,也就不包含接口中的实体类,故服务调用方只能提供Map形式的数据,由服务提供者根据Map转化成对应的实体。

    丁威
  • 谁是存储界的美军F-35统一作战平台?

    统一作战平台 在军工界,为了降低成本,美军发起F35战斗机研发项目。与传统而昂贵空战的F-22战斗力不同,F35不再是一款简单的战机,而是开启云作战新模式。F-...

    魏新宇
  • 双12淘宝速达一炮而红,淘宝如何深度赋能中小商家?

    淘宝双12刚刚落下帷幕,淘宝速达的登场成为亮点,这是淘宝持续创新赋能商家,在菜鸟网络和蜂鸟配送的协同支持下,将消费体验推向极致的又一次尝试。从双12成绩单来看,...

    罗超频道
  • 借助 VuePress 和 GitBook ,10 分钟即可免费部署你的静态博客网站

    因为自己平时经常写博客,也有博客网站,所以 Leader 叫我做一个 CMS 的帮助中心的技术选型,CMS 的帮助中心的功能:是通过文章来教用户如何使用我们的项...

    夜尽天明
  • opencv 将内存中图片读入到mat矩阵

    平常用的比较多的是 imread函数,直接将一个.jpg或者.bmp或者其他格式图片文件,读入到mat矩阵中。

    战神伽罗
  • ApiBoot发布2.1.4-RC1版本,修复无法拉取jar到本地问题

    ApiBoot为接口服务而生,基于SpringBoot完成扩展、自动化配置,通过封装一系列Starter来让调用者快速集成组件,降低学习、使用门槛,提高开发效率...

    恒宇少年
  • ApiBoot 新官网发布 - 丰富使用文档

    ApiBoot为接口服务而生,基于SpringBoot完成扩展、自动化配置,通过封装一系列Starter来让调用者快速集成组件,降低学习、使用门槛,提高开发效率...

    恒宇少年

扫码关注云+社区

领取腾讯云代金券