前幾天在做h5活動頁面的時候,有這樣一個需求

上面的活動排行點擊查看歷史排行數據，彈出日期選擇框，如下圖

點擊要查看的日期排行數據，這裏需要對還沒到的日期做處理，讓用戶不能選擇，只可選擇今天或者之前的日期

那這個功能怎麽實現，主要有以下幾個點：

1.點擊日期單選功能，添加選中樣式

我們先在li元素上面添加點擊事件 @click="dateSelect(item)"

在vue中定義一個data數據變量

data: function () {
      return {
         
            activeItem:‘‘,//當前選中日期
    },

定義點擊事件函數，將當期點擊item賦值給activeItem變量

dateSelect:function(item){
this.activeItem = item;
            },

然後在li元素下定義選中樣式，通過：class類使用三元表達式判斷item與當前activeItem是否相等，顯示選中樣式類名

  <i :class="activeItem==item?‘selected‘:‘‘"></i>

這樣，日期單選功能功能就實現了，並添加了相應的選中樣式，效果如下

2.禁止用戶點擊還沒到的日期，並添加禁用樣式

<ul class="date_list clearfix">
                        <!-- <li class="date_list_item" :class="type==2?‘week‘:‘‘" @click="dateSelect(item)" v-for="item in dates">
                            <div class="show_date"><span v-text="item.show"></span><i :class="activeItem==item?‘selected‘:‘‘"></i></div>
                            <span class="date" v-text="item.date" v-if="type==1"></span>
                        </li> -->
                        <li class="date_list_item" :class="item.flag==1?‘disable‘:‘‘" :style="{‘width‘:type==2?‘50%‘:‘25%‘}" @click="dateSelect(item)" v-for="item in dates">
                            <div class="show_date"><span v-text="item.show"></span><i :class="activeItem==item?‘selected‘:‘‘"></i></div>
                            <span class="date" v-text="item.date" v-if="type==1"></span>
                        </li>
                    </ul>
 

h5活動頁開發總結記錄