微信小程序 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 表单中textarea字数限制实现代码
Dec 07 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
单元选择合并变色示例代码
May 26 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
js实现省市级联效果分享
Aug 10 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
详解express使用vue-router的history踩坑
Jun 05 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 彩色文字实现代码
2009/06/29 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
vuejs指令详解
2017/02/07 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
Python常用内置函数总结
2015/02/08 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
python机器学习库常用汇总
2017/11/15 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
Django操作session 的方法
2020/03/09 Python
详解python UDP 编程
2020/08/24 Python
python pillow库的基础使用教程
2021/01/13 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
ktv好的活动方案
2014/08/17 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
Python中常见的导入方式总结
2021/05/06 Python
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
Python Pandas 删除列操作
2022/03/16 Python