微信小程序实战之顶部导航栏(选项卡)(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 相关文章推荐
js脚本学习 比较实用的基础
Sep 07 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
详解JavaScript函数对象
Nov 15 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
php分页思路以及在ZF中的使用
2012/05/30 PHP
学习php分页代码实例
2013/10/24 PHP
php实现图片缩放功能类
2013/12/18 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
Js callBack 返回前一页的js方法
2008/11/30 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
JavaScript多线程详解
2015/08/12 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
python下载图片实现方法(超简单)
2017/07/21 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python3 爬取图片的实例代码
2018/11/06 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
Python实现手势识别
2020/10/21 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
就业协议书范本
2014/04/11 职场文书
优秀大学生自荐信
2014/06/09 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs