微信小程序 开发之顶部导航栏实例代码


Posted in Javascript onFebruary 23, 2017

微信小程序 开发之顶部导航栏

需求:顶部导航栏

效果图:

微信小程序 开发之顶部导航栏实例代码

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 
  }) 
 } 
})

运行:

微信小程序 开发之顶部导航栏实例代码

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 #Javascript
js实现简单的选项卡效果
Feb 23 #Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 #Javascript
jQuery事件详解
Feb 23 #Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 #Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 #Javascript
Javascript 链式作用域详细介绍
Feb 23 #Javascript
You might like
基于mysql的bbs设计(一)
2006/10/09 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
php实现微信扫码支付
2017/03/26 PHP
php实例化一个类的具体方法
2019/09/19 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
python模块smtplib学习
2018/05/22 Python
python生成ppt的方法
2018/06/07 Python
10个Python小技巧你值得拥有
2018/09/29 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
自我评价怎么写好呢?
2013/12/05 职场文书
民间个人借款协议书
2014/09/30 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
公司更名通知函
2015/04/24 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
html5调用摄像头截图功能
2022/01/18 Javascript
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技
python神经网络 使用Keras构建RNN训练
2022/05/04 Python