谁知道这个效果怎么实现!!求告知

Question

选择后效果如图所示：（微信小程序）,求各位告知！谢谢各位！感激不尽

Answer 1

DMEO如下，有帮助麻烦点个采纳【本回答右上角】，谢谢~~

demo.js

Page({
  data: {
    hours:[11,12,13,14,15],
    counter:0,
    startIndex:-1,
    endIndex:-1
  }, 
 setClick(e){
   var ds=e.target.dataset;
   this.data[this.data.counter==0?'startIndex':'endIndex']=ds.index;
   this.data.counter++;
   console.log(JSON.stringify(this.data))
   if(this.data.counter>2){//点2次后重置
     this.data.counter=1;
     this.data.startIndex=ds.index;
     this.data.endIndex=-1;
   }
   this.setData({counter:this.data.counter,startIndex:this.data.startIndex,endIndex:this.data.endIndex})
 }
 
})
 

demo.wxss

page{background:#eee}
.container{background:#fff;border-radius:15px;padding:10px;max-width:90%;margin:20px auto;display:flex;}
.container .item{border-radius: 15px;line-height:40px;font-size:18px;padding:15px;height:40px}
.container .active{background:#5bcaff;line-height:15px}
.container .active::after{content:'开始';display: block;margin-top:10px;text-align:center;}
.container .end::after{content:'结束';}

demo.wxml

<view class="container">
     <view class="item{{startIndex==index?' active':''}}{{endIndex==index?' active end':''}}" data-index="{{index}}" wx:for="{{hours}}" bindtap="setClick">{{item}}点</view>
  </view>