微信小程序 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 相关文章推荐
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
详解webpack+angular2开发环境搭建
Jun 28 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 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
数据库的日期格式转换
2006/10/09 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
php导出生成word的方法
2015/12/25 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
防止登录页面出现在frame中js代码
2014/07/22 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
深入研究React中setState源码
2017/11/17 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
Python threading多线程编程实例
2014/09/18 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Flask之flask-script模块使用
2018/07/26 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
《神奇的克隆》教学反思
2014/04/10 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
励志演讲稿600字
2014/08/21 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
小学班主任自我评价
2015/03/11 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书