微信小程序 navbar

来源：互联网发布：马丁全单吉他知乎编辑：程序博客网时间：2024/06/10 05:28

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

1 0