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


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 相关文章推荐
js网页右下角提示框实例
Oct 14 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
js cavans实现静态滚动弹幕
May 21 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
杏林同学录(七)
2006/10/09 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
php二维数组转成字符串示例
2014/02/17 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
react基本安装与测试示例
2020/04/27 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
python实现web方式logview的方法
2015/08/10 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python selenium 三种等待方式解读
2016/09/15 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
python list元素为tuple时的排序方法
2018/04/18 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
实习生单位鉴定意见
2013/12/04 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
会计岗位职责范本
2014/03/07 职场文书
单位作风建设自查报告
2014/10/23 职场文书
朋友聚会开场白
2015/06/01 职场文书
信息技术研修心得体会
2016/01/08 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript