微信小程序 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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
犀利的js 函数集合
Jun 11 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 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
header()函数使用说明
2006/11/23 PHP
SMARTY学习手记
2007/01/04 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
利用python程序帮大家清理windows垃圾
2017/01/15 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
医院后勤自我鉴定
2013/10/13 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
爱国演讲稿500字
2014/05/04 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
幽灵公主观后感
2015/06/09 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL