微信小程序 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库 开发规则
Jan 31 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
Angular4 中常用的指令入门总结
Jun 12 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
Vue中图片Src使用变量的方法
Oct 30 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
一个捕获函数输出的函数
2007/02/14 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
新闻网站实习自我鉴定
2013/09/25 职场文书
英文简历中的自我评价
2013/10/06 职场文书
教师评语大全
2014/04/28 职场文书
团队精神口号
2014/06/06 职场文书
环保小标语
2014/06/13 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
财务统计员岗位职责
2015/04/14 职场文书
学会感恩主题班会
2015/08/12 职场文书
严以律己学习心得体会
2016/01/13 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript