微信小程序中實現點擊當前標籤改變樣式以及同時改變後幾個標籤的樣式

如下圖，這便是我要實現的效果，點擊11點添加樣式隨後的11點半和12點也添加樣式，做小程序的你應該可以發現下邊的時間數組並不是一次就可以遍歷完，上午、下午、晚上各循環了一遍，之前我用JS和JQuery寫過了一遍一樣文章：點擊這查看，但是小程序並不支持DOM對象，所以這裏來看下小程序是怎麼實現的。

先看下wxml
我的思路是這樣的，首先在循環遍歷數組時判斷上午下午晚上的時間進行輸出，我直接用字符串進行對比然後發現是可以用的，但是有意思的是大小對比一定要有一個區間，比如我判斷上午時間是這樣寫的item.hour<'12:00'，但輸出結果怎樣10點到11:30的，所以我改成item.hour>='7:00'||item.hour<'12:00'就可以顯示全了，同理晚上的也不能直接item.hour >= '18:00'，不然會多出8點到9點的時間。然後是點擊時的樣式判斷，樣時有三種cut-left-arc、cut-mid-style、cut-right-arc，分別是左圓角、默認、右圓角，判斷值爲數組裏selected變量，然後定義了下標data-index="{{index}}"用於JS判斷更改selected值從而達到不同的樣式效果。

原項目太亂了，我就給用到的代碼好了

   <!-- 上午-->
    <view wx:if="{{item.hour>='7:00'||item.hour<'12:00'}}" wx:for="{{hourArr}}" wx:key="this" 
    class="{{item.selected===1?'cut-left-arc':''}}{{item.selected===2?'cut-mid-style':''}}{{item.selected===3?'cut-right-arc':''}}" 
    bindtap="clickTime" data-index="{{index}}">
      <text>{{item.hour}}</text>
    </view>
    <!-- 下午-->
     <view wx:if="{{item.hour >= '12:00'&&item.hour < '18:00'}}" wx:for="{{hourArr}}" wx:key="this" 
     class="{{item.selected===1?'cut-left-arc':''}}{{item.selected===2?'cut-mid-style':''}}{{item.selected===3?'cut-right-arc':''}}" 
     bindtap="clickTime" data-index="{{index}}">
      <text>{{item.hour}}</text>
    </view>
    <!-- 晚上 -->
    <view wx:if="{{item.hour >= '18:00'&&item.hour <= '23:00'}}" wx:for="{{hourArr}}" wx:key="this" 
    class="{{item.selected===1?'cut-left-arc':''}}{{item.selected===2?'cut-mid-style':''}}{{item.selected===3?'cut-right-arc':''}}" 
    bindtap="clickTime" data-index="{{index}}">
      <text>{{item.hour}}</text>
    </view>

部分點擊時間後的wxss樣式參考

.cut-left-arc {
  background-color: #ff86a5;
  color: snow !important;
  border-radius: 30rpx 0 0 30rpx;
}

.cut-left-arc text {
  border: none !important;
}

.cut-mid-style {
  background-color: #ff86a5;
  color: snow !important;
}

.cut-mid-style text {
  border: none !important;
}

.cut-right-arc {
  background-color: #ff86a5;
  color: snow !important;
  border-radius: 0 30rpx 30rpx 0;
}

.cut-right-arc text {
  border: none !important;
}

然後是js部分：
data下的數組定義了每一個時間選擇的狀態selected

//時間數組
    hourArr: [
    {hour: "8:00",selected: 0}, 
    {hour: "8:30",selected: 0}, 
    {hour: "9:00",selected: 0}, 
    {hour: "9:30",selected: 0}, 
    {hour: "10:00",selected: 0}, 
    {hour: "10:30",selected: 0},
    {hour: "11:00",selected: 0}, 
    {hour: "11:30",selected: 0},
    {hour: "12:00",selected: 0}, 
    {hour: "12:30",selected: 0},
    {hour: "13:00",selected: 0}, 
    {hour: "13:30",selected: 0}, 
    {hour: "14:00",selected: 0}, 
    {hour: "14:30",selected: 0},
    {hour: "15:00",selected: 0},
    {hour: "15:30",selected: 0},
    {hour: "16:00",selected: 0}, 
    {hour: "16:30",selected: 0}, 
    {hour: "17:00",selected: 0}, 
    {hour: "17:30",selected: 0},
    {hour: "18:00",selected: 0},
    {hour: "18:30",selected: 0}, 
    {hour: "19:00",selected: 0},
    {hour: "19:30",selected: 0},
    {hour: "20:00",selected: 0},
    {hour: "20:30",selected: 0},
    {hour: "21:00",selected: 0},
    {hour: "21:30",selected: 0}, 
    {hour: "22:00",selected: 0},
    {hour: "22:30",selected: 0}
    ],

然後是點擊時間方法，我把wxml傳過來的下標index和時間數組hourArr的下標進行對比，相等時改變selected的狀態，當前下標改爲1，顯示左圓角樣式，下標的後一個改爲2，顯示默認樣式，下標後的第兩個改爲3，顯示右圓角樣式，但開始時還是要清理已被選中的狀態以及最後要更新hourArr時間數組，還有就是點擊22點和22點半時會報錯，因爲時間長度不夠了，加個判斷彈窗就好了。

  //選擇時間
  clickTime: function(e) {
    // console.log(e)
    let myIndex = e.currentTarget.dataset.index;
    console.log(myIndex)
    let hourArr = this.data.hourArr;
    // console.log(hourArr)
    //清理選中的狀態
    for (let index in hourArr) {
      hourArr[index].selected = 0;
    }
    for (let index in hourArr) {
      // console.log(index)
      if (myIndex == index) {
        hourArr[index].selected = 1;
        let index1 = myIndex + 1;
        // console.log(index1)
        let index2 = myIndex + 2;
        hourArr[index1].selected = 2;
        hourArr[index2].selected = 3;
      }
    }
    // console.log(hourArr)
    //返回新狀態的小時數組
    this.setData({
      hourArr: hourArr
    })
  },