码迷,mamicode.com
首页 > 其他好文 > 详细

h5活动页开发总结记录

时间:2018-03-11 00:21:08      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:行数据   http   gpo   disable   通过   ble   image   date   clear   

前几天在做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活动页开发总结记录

标签:行数据   http   gpo   disable   通过   ble   image   date   clear   

原文地址:https://www.cnblogs.com/fozero/p/8542110.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!