微信小程序 navbar实例详解


Posted in Javascript onMay 11, 2017

微信小程序 navbar实例详解

实现效果图:

微信小程序 navbar实例详解

data

typeList: [ 
  { name: "日报", id: "1" }, 
  { name: "周报", id: "2" }, 
  { name: "月报", id: "3" }, 
  { name: "目录", id: "4" }]

js

that.setData({ 
  dateValue: util.formatTime(new Date()), //picker date 
  typeList: appInstance.typeList, 
  currentTypeId: "1" 
 }) 
 
 
//添加点击模板点击事件 
for (var i = 0; i < appInstance.typeList.length; i++) { 
 (function (item) { 
  pageObject['bind' + item.id] = function (e) { 
   this.setData({ 
    currentTypeId: e.currentTarget.dataset.index 
   }) 
  } 
 })(appInstance.typeList[i]) 
}

wxml

<dl class="menu"> 
 <block wx:for="{{typeList}}" wx:for-item="type" wx:key="{{index}}" wx:for-index="{{index}}"> 
 <dt bindtap="bind{{type.id}}" data-index="{{type.id}}" class="{{currentTypeId==type.id?'yesCurrentType':'noCurrentType'}}">{{type.name}}</dt> 
 </block> 
</dl> 
<picker class="timePicker" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange" start="1999-01-01" end="2999-12-12">时间:{{dateValue}} 
 <image class="selReportImg" src="../images/clock.png"></image> 
</picker>

wxss

.timePicker { 
 width: 90%; 
 padding: 10rpx; 
 margin: auto; 
 border: 1px solid red; 
} 
 
.menu { 
 display: flex; 
 flex-direction: row; 
 align-items: flex-start; 
 justify-content: space-between; 
} 
 
dt { 
 width: 25%; 
 height: 100rpx; 
} 
 
.noCurrentType { 
 height: 90rpx; 
 color: black; 
 padding-left: 30rpx; 
 border: 1px solid; 
 background-color: #c2c2c2; 
} 
 
.yesCurrentType { 
 color: black; 
 padding-left: 30rpx; 
}

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

Javascript 相关文章推荐
javascript天然的迭代器
Oct 29 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
微信小程序 图片宽高自适应详解
May 11 #Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 #Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 #Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 #Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 #Javascript
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
微信小程序中使用javascript 回调函数
May 11 #Javascript
You might like
linux下为php添加curl扩展的方法
2011/07/29 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
PHP使用递归生成文章树
2015/04/21 PHP
php日期操作技巧小结
2016/06/25 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
房地产员工找工作的自我评价
2013/11/15 职场文书
实习生辞职信范文
2015/03/02 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python