专栏首页算法与编程之美微信小程序|Tab标签页

微信小程序|Tab标签页

欢迎点击「算法与编程之美」↑关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章

问题描述

在使用小程序的时候会看到大多数都是在小程序的底部设置导航栏,然而会发现有一些小程序的顶部也会有导航栏,那么如何来设置小程序的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 团队


微信号:算法与编程之美

长按识别二维码关注我们!

温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

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

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

原始发表时间:2020-06-04

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    算法与编程之美
  • 算法 | KMP字符串匹配

    Python字符串str是在Python编写程序过程中,最常见的一种基本数据类型。字符串是许多单个子串组成的序列,其主要是用来表示文本。字符串是不可变数据类型,...

    算法与编程之美
  • JavaScript|计算字符串的字节数

    问题中提到计算字节数,首先需要对字节进行了解,Byte数是一个单位计量数值,其中字符串中单个的字符(英文、数字、特殊字符等)为一个字节,中文汉字是两个字节。

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

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

    算法与编程之美
  • LuaJit转义的问题

    之前在项目中,处理类似!30转为表现的字符串时,有人写了这样的一段代码“\![1-2][0-9]”,当换成luajit时启动报错了,出错原因在于转义字符使用不对...

    meteoric
  • 步骤3 - Orchestra将请求转发给微服务提供者

    因为目前只有Orchestra一个服务器作为TCP服务器使用,所以大部分逻辑都直接写在tcpServer.js里:

    Jerry Wang
  • web前端架构 - 写在前面的话

    写在前面的话: 因为是我自己亲身参与的项目,所以代码啊,架构啊,应该不会很高大上,反而会很土,很从底开始,一点点的加深对web前端架构的认识。 而且很有...

    web前端教室
  • GC算法、垃圾收集器

    引用计数:每个对象有一个引用计数属性,新增一个引用时计数加1,引用释放时计数减1,计数为0时可以回收。此方法简单,无法解决对象相互循环引用的问题。

    IT技术小咖
  • Golang语言Notepad++简易开发环境搭建(windows)

    1.下载安装go语言: https://golang.org/dl/ 选择对应的平台,建议使用msi安装包,这个会帮你配置好环境变量(也许需要重启) 对应的环境...

    李海彬
  • JVM垃圾收集器详解

    一个单线程的收集器,使用复制算法。它只会使用一条线程工作,并且在进行垃圾收集的同时,必须暂停其他所有的工作线程(Stop The Word),直到垃圾收集结束。

    Java学习录

扫码关注云+社区

领取腾讯云代金券