微信小程序 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 相关文章推荐
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
BootStrap的两种模态框方式
May 10 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
uni-app使用微信小程序云函数的步骤示例
May 22 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
一棵php的类树(支持无限分类)
2006/10/09 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
优秀士兵个人事迹材料
2014/01/19 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
个人银行贷款担保书
2014/04/01 职场文书
高中学生评语大全
2014/04/25 职场文书
煤矿安全承诺书
2014/05/22 职场文书
天地会口号
2014/06/17 职场文书
停电放假通知
2015/04/14 职场文书