h5活动页开发总结记录

Posted 2020-10-27 fozero

前几天在做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>