微信小程序实战之顶部导航栏(选项卡)(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 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
js a标签点击事件
Mar 30 Javascript
老生常谈js数据类型
Aug 03 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
Vue性能优化的方法
Jul 30 Javascript
npm全局环境变量配置详解
Dec 15 Javascript
ReactRouter的实现方法
Jan 25 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的可变变量名需要的注意的问题
2013/06/20 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
php实现的漂亮分页方法
2014/04/17 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
popdiv
2006/07/14 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
django富文本编辑器的实现示例
2019/04/10 Python
浅谈python3中input输入的使用
2019/08/02 Python
python文件及目录操作代码汇总
2020/07/08 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
注塑工厂厂长岗位职责
2013/12/02 职场文书
请假条的格式
2014/04/11 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
员工工作表扬信
2015/05/05 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python