微信小程序|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 团队
微信号:算法与编程之美
长按识别二维码关注我们!
温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!
微信小程序|Tab标签页相关推荐
- 微信小程序中标签页切换效果是怎么做出来的
于传统网页开发中的标签页切换效果不同的是,小程序的标签页切换更接近原生APP的交互体验!也就是可以通过左右滑动页面进行切换,类似于网页开发中的焦点图切换的效果. --这当然是通过微信小程序强大的组件和 ...
- image 微信小程序flex_微信小程序view标签以及display:flex的测试
一:testview.wxml,testview.js自动生成示例代码 //testview.wxml flex-direction: row 1 2 3 flex-direction: column ...
- PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下 微信小程序 Tab页切换更新数据 微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
- navtab触底 小程序_微信小程序TAB切换效果
微信小程序tab切换效果 话不多说,先上效果图 主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页 然后是wxcss样式代码 .t ...
- 微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换 一.简介 1.核心思想 二.实现 1.wxml实现 2.js实现 3.wxss实现 三.参考和总结 四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
- 新闻列表页flex_微信小程序新闻网站列表页
javascript 技术文章 开发 微信小程序新闻网站列表页 在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属 ...
- 微信按钮android代码实现原理,微信小程序button标签open-type实现原理
这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 open-type (微信 ...
- 微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
- 微信小程序时间标签与范围联动设计实现
微信小程序时间标签与范围联动设计实现?最近忙于一个有关数据管理的微信小程序开发,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.pic ...
最新文章
- 我所理解的原型原型链 1
- linux中html的图片显示不出来,如何在HTML中显示原始的rgb图像
- 基于FT5x06嵌入式Linux电容触摸屏驱动
- Maven deploy部署jar到远程私服仓库
- 第二节:深入剖析Thread的五大方法、数据槽、内存栅栏
- mysql的四层架构_分布式数据库服务器的四层架构
- android 调用.net 的webservice .
- linux开启多少到多少端口命令,Linux端口命令
- 微型计算机原理与接口技术 王建国,微型计算机原理与接口技术课后习题答案及部分定义总结(王建国主编)...
- java datatable用法_Java中实现DataTable工具类,并利用其实现简单分页控件。
- 获取单选按钮选中的值
- ASP.NET3.5下的MSChart图表控件使用
- 数据以及空值数据处理方法
- CCproxy 实现http服务器代理
- 移动开发者周刊第一期
- ps小知识——将图片素描化
- Smart3D系列教程6之 《案例实战演练3——倾斜数据正射影像及DSM的生产》
- 医保局:医保政策性利好消息!
- 图数据库查询语言Cypher、Gremlin和SPARQL
- 防抖云台-鸡头稳定 简介篇