想要实现的效果:
1、点击数字时背景为红色,字体为白色
2、点击1或2时,对应下面的灰点消失,再次点击其他数字时灰点显示
wxml:
<block wx:for="{{weekDay}}" wx:key="item.index"> <view data-key="{{index}}" bindtap='select_d' class="day_list {{d_state==index?'red_day':''}}"> <text>{{item.day_n}}</text> <text class='{{item.dian_class}} {{item.state==0?"dian_none":"dian_block"}}'></text> </view> </block>
wxss:
.dian_none{ display: none!important; } .dian_block{ display: block!important; } .red_day{ background-color: #e33c3c; color: #ffffff; } .dian_d{ width: 9rpx; height: 9rpx; background-color: #d8d8d8; border-radius: 50%; display: block; }
js:
data: { date_week:["日","一","二","三","四","五","六"], weekDay:[ { day_n:"26", dian_class:"" }, { day_n: "27", dian_class: "" },{ day_n: "28", dian_class: "" }, { day_n: "29", dian_class: "" }, { day_n: "30", dian_class: "" }, { day_n: "1", dian_class: "dian_d", state:1 }, { day_n: "2", dian_class: "dian_d", state:1 } ], d_state:"0", }, select_d:function(e){ var array = this.data.weekDay; var index=e.currentTarget.dataset.key; if (array[index].dian_class =="dian_d"){ for (var i = 0; i < array.length; i++) { if (array[i].dian_class == "dian_d") { array[i].state = 1; } } array[index].state = 0; } else if (array[index].dian_class ==""){ for (var i = 0; i < array.length; i++){ if(array[i].dian_class=="dian_d"){ array[i].state = 1; } } } this.setData({ d_state:e.currentTarget.dataset.key, weekDay:this.data.weekDay }); }
工作日 8:30-12:00 14:30-18:00 周六及部分节假日提供值班服务
工作日 8:30-12:00 14:30-18:30