微信小程序 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;
}

 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！