微信小程序 navbar

最新推荐文章于 2024-08-16 08:13:55 发布

xiaochun365

最新推荐文章于 2024-08-16 08:13:55 发布

阅读量3.2k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/xiaochun365/article/details/70271472

版权

微信小程序专栏收录该内容

40 篇文章 2 订阅

订阅专栏

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