h5活动页开发总结记录
前几天在做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.禁止用户点击还没到的日期,并添加禁用样式
先获取当前日期
var curDate = this.getCurDate();
这里写了个获取当前日期的公共函数
getCurDate:function(){//获取当前日期 2018-03-07
var curDate = new Date();
var y = curDate.getFullYear();
var m = (curDate.getMonth()+1)<10?'0'+(curDate.getMonth()+1):curDate.getMonth()+1;
var d = curDate.getDate()<10?'0'+curDate.getDate():curDate.getDate();
return y+"-"+m+"-"+d;
},
通过循环日期集合然后将日期与今天进行比较,如果是大于今天的日期则添加一个flag标识item.flag = 1表示不可点击,代码如下:
var _dayDates = [];
dayDates.forEach(function(item,index){
if(_this.dateCompare(curDate,item.formatDate)){//大于今天日期
item.flag = 1;//不可点击
}
_dayDates.push(item);
});
this.dates = _dayDates;
日期比较函数
dateCompare:function(today,date){//日期比较 选择日期和今天比较
var d1 = new Date(today);
var d2 = new Date(date);
return Date.parse(d1)<Date.parse(d2);
},
修改dateSelect函数,添加if(item.flag){return;}对flag进行判断,如果flag是1,则不可点击
dateSelect:function(item){
if(item.flag){return;}//不可点击
this.activeItem = item;
},
最后,我们设置不可点击的样式,在li元素使用:class通过判断flag的值来添加禁用样式类disable,这样我们就实现了禁止用户点击还没到的日期的功能,及禁用样式的显示
代码如下:
<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>
效果图
这里需要注意的是,vue中不能添加2个:class来做判断,所以我将之前的:class改成了使用:style来处理 :style="{'width':type==2?'50%':'25%'}"
作者:fozero
声明:原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/8542110.html
标签:js,vue,开发总结
h5活动页开发总结记录的更多相关文章
- H5活动页开发有关
活动页开发流程 针对各种节日各种活动,临时定稿开发的活动页,往往时间安排都比较急 ---- 产品定下需求方向 UI实现设计稿 1. 草图和交互逻辑定稿=>多少个页面,每个页面表达的含义以及和用户 ...
- PHP微信H5支付开发
近来公司项目要求用到微信H5开发,因为微信开发文档处处都是坑,我也走了不少弯路,现在就把H5支付的过程记录一下,已备后用!! 首先 先去商户平台申请开通 H5支付!!!! 我们从微信官方下载H5支付d ...
- 微信硬件H5面板开发(一) ---- 调用openApi
微信硬件平台是微信推出连接物与人,物与物的IOT解决方案.也就是说可以通过微信控制各种智能设备.比如一些蓝牙设备.空调.电视等等. 我本身不懂硬件(虽然是电子信息专业),硬件是北航的两个研究生在弄,小 ...
- iOS开发之记录用户登录状态
iOS开发之记录用户登录状态 我们知道:CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreData还是蛮好用的.今天要说的是如何记录我们用户的登陆状态.例如微信 ...
- h5直播开发之旅总结
前言 关于直播,有很多相关技术文章,这里不多说. 作为前端,我们比较关心我们所需要的. 直播的大致流程: APP端调用摄像头 -> 拍摄视频 -> 实时上传视频 -> 服务器端获取视 ...
- C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...
- 今天我看了一个H5游戏EUI的例子,我都快分不清我到底是在用什么语言编译了代码了,作为刚刚学习H5游戏开发的菜鸟只能默默的收集知识
今天看了一个EUI的demo,也是接触H5游戏开发的第五天了,我想看看我能不能做点什么出来,哎,自己写果然还是有问题的.在看EUI哪一个demo的时候就遇见了一些摇摆不定的问题,我觉得提出来 1.to ...
- 最近这两天看了关于H5游戏开发的一个教程,实践很短暂,看了很多理论的东西,现在呢也只是想回忆回忆关于EUI的部分知识吧
首先我了解了什么是Egret: Egret中文就是白鹭的意思,Egret是一套H5游戏开发的软件.(纯粹属于个人理解) 其次我对以下几款软件的相关知识做了些了解: Egret Engine(引擎),E ...
- 开发错误记录8:Unable to instantiate application com
开发错误记录8:Unable to instantiate application com.android.tools.fd.runtime.BootstrapApplication 这是因为在And ...
随机推荐
- Spring MVC 的 Converter 和 Formatter
Converter 和 Formatter 都可用于将一种对象类型转换成另一种对象类型. Converter 是通用元件,可以将一种类型转换成另一种类型,可以在应用程序中的任意层中使用: Format ...
- Python 多进程编程之multiprocessing--Process
Python 多进程编程之multiprocessing 1,Process 跨平台的进程创建模块(multiprocessing), 支持跨平台:windowx/linux 创建和启动 创 ...
- 数据库-mysql语句-查-WEB服务器
(1)MySQL中的查询 (2)WEB服务器 Order: 订单.排序 Set:设置.集合 Table:表.桌子 1.MySQL中的简单查询 —— 查询结果的排序 示例:查询出所有员工信息,要求按工 ...
- SAS对数据变量的处理
SAS对数据变量的处理 在使用DATA步基于已经存在的数据集生成新数据集时,可以指定在新数据集中不需要包含的变量而仅读取其他变量,或者指定仅需要在 新数据集中包含的变量.该功能可以通过DATA步中的S ...
- 小白的CTF学习之路1——程序与CPU
刚刚注册了这个博客园,尽量保持每日一更(*/ω\*) 今天看了po学院的教学视频,了解了程序是什么,如何在CPU当中工作的等各种之前未曾想过的问题,特此记录,以防忘记 首先我们学习程序与CPU之前需要 ...
- LOJ-10106(有向图欧拉回路的判断)
题目链接:传送门 思路: (1)将每个单词视为有向路径,单词的起始字母是起始节点,末尾字母是终止节点,然后找由字母建立的有向图 是否是欧拉图或者半欧拉图. (2)先用并查集判断是否连通,再判断入度与出 ...
- left join on 和where中条件的放置位置
转自:http://blog.csdn.net/muxiaoshan/article/details/7617533 select * from td left join (select case_ ...
- PHY过采样问题
什么频率下进行过采样 ?? 按时程序是LMDS时钟小于100M时会进行过程采样,实际上PHY的文档上也有明确的说明: The minimum operational data rate is 1.0 ...
- 记一次安装VS2015后启动失败的修复过程
安装过程没有提示任何问题,然而启动vs时提示没有安装 .Net Framework 4.6,那就安装吧,但是安装 4.6 时却提示 Windows Moudle Installer 服务没有启动,于是 ...
- 8. Filters in ASP.NET MVC 5.0【ASP.NET MVC 5.0中的过滤器】
ASP.NET Filers用来在MVC框架的不同请求处理阶段,注入额外的逻辑.过滤器为横切关注点提供了一种方法(日志记录,授权,缓存). 在这篇文章中,我将会向你介绍MVC框架支持的各种不同种类过滤 ...