微信小程序 navbar实例详解

typeList: [   { name: "日报", id: "1" },   { name: "周报", id: "2" },   { name: "月报", id: "3" },   { name: "目录", id: "4" }] 

 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]) } 

<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> 

.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; }