小程序点击不同按钮显示不同页面

核心代码如下

wxml

        <button class="reset-top{{chooseMonth?'':'-notchoosed'}}" bindtap="chooseMonthBtnClick" >按月button>
        <button class="reset-bottom{{chooseYear?'':'-notchoosed'}}" bindtap="chooseYearBtnClick">按年button>

<view wx:if="{{chooseMonth == true}}">...
view>
<view wx:if="{{chooseMonth == false}}">...
view>

wxss

.reset-bottom {
  width: 15%;
  margin-right: 3%;
  font-size: 12px;
  background-color:rgb(28,200,138);
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.reset-bottom-notchoosed {
  width: 15%;
  margin-right: 3%;
  font-size: 12px;
  background-color:rgb(255,255,255);
  border: 2rpx solid #1CC88A;
  color: black;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.reset-top {
  width: 15%;
  margin-right: 3%;
  font-size: 12px;
  background-color:rgb(28,200,138);
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

js

  chooseMonthBtnClick:function (e){
    wx.clearStorage(),
    this.setData({
      chooseMonth: true,
      chooseYear: false,
      option: 1
    })
  },
  chooseYearBtnClick: function (e) {
    this.setData({
      chooseMonth: false,
      chooseYear: true
    })
  },

具体效果可见：