微信小程序实战之顶部导航栏(选项卡)(1)


Posted in Javascript onJune 19, 2020

本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下

需求:顶部导航栏

效果图:

微信小程序实战之顶部导航栏(选项卡)(1)

wxml:

<!--导航条--> 
<view class="navbar"> 
 <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text> 
</view> 
 
<!--首页--> 
<view hidden="{{currentTab!==0}}"> 
 tab_01 
</view> 
 
<!--搜索--> 
<view hidden="{{currentTab!==1}}"> 
 tab_02 
</view> 
 
<!--我--> 
<view hidden="{{currentTab!==2}}"> 
 tab_03 
</view>

wxss:

page{ 
 display: flex; 
 flex-direction: column; 
 height: 100%; 
} 
.navbar{ 
 flex: none; 
 display: flex; 
 background: #fff; 
} 
.navbar .item{ 
 position: relative; 
 flex: auto; 
 text-align: center; 
 line-height: 80rpx; 
} 
.navbar .item.active{ 
 color: #FFCC00; 
} 
.navbar .item.active:after{ 
 content: ""; 
 display: block; 
 position: absolute; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 height: 4rpx; 
 background: #FFCC00; 
}

js:

var app = getApp() 
Page({ 
 data: { 
 navbar: ['首页', '搜索', '我'], 
 currentTab: 0 
 }, 
 navbarTap: function(e){ 
 this.setData({ 
 currentTab: e.currentTarget.dataset.idx 
 }) 
 } 
})

运行:

微信小程序实战之顶部导航栏(选项卡)(1)

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
vue模板语法-插值详解
Mar 06 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
vue中的scope使用详解
Oct 29 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 #Javascript
微信小程序教程系列之新建页面(4)
Apr 17 #Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 #Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 #Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 #Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 #Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 #Javascript
You might like
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
Angular实现响应式表单
2017/08/04 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
原生js实现form表单序列化的方法
2018/08/02 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
js实现微信聊天界面
2020/08/09 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
python处理xml文件的方法小结
2017/05/02 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
销售总监工作职责
2013/11/21 职场文书
大学生最常用的自我评价
2013/12/07 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python