前幾天在做h5活動頁面的時候,有這樣乙個需求
點選要檢視的日期排行資料,這裡需要對還沒到的日期做處理,讓使用者不能選擇,只可選擇今天或者之前的日期
那這個功能怎麼實現,主要有以下幾個點:
1.點選日期單選功能,新增選中樣式
我們先在li元素上面新增點選事件 @click="dateselect(item)"
在vue中定義乙個data資料變數
data: function () ,
定義點選事件函式,將當期點選item賦值給activeitem變數
dateselect:function(item),
然後在li元素下定義選中樣式,通過:class類使用三元表示式判斷item與當前activeitem是否相等,顯示選中樣式類名
這樣,日期單選功能功能就實現了,並新增了相應的選中樣式,效果如下
2.禁止使用者點選還沒到的日期,並新增禁用樣式
先獲取當前日期
var curdate = this.getcurdate();
這裡寫了個獲取當前日期的公共函式
getcurdate:function(),
通過迴圈日期集合然後將日期與今天進行比較,如果是大於今天的日期則新增乙個flag標識item.flag = 1表示不可點選,**如下:
最後,我們設定不可點選的樣式,在li元素使用:class通過判斷flag的值來新增禁用樣式類disable,這樣我們就實現了禁止使用者點選還沒到的日期的功能,及禁用樣式的顯示var _daydates = ;
daydates.foreach(function(item,index)
_daydates.push(item);
});this.dates = _daydates;
日期比較函式
datecompare:function(today,date)對flag進行判斷,如果flag是1,則不可點選
dateselect:function(item)//不可點選
this.activeitem = item;
},
**如下:
效果圖
這裡需要注意的是,vue中不能新增2個:class來做判斷,所以我將之前的:class改成了使用:style來處理 :style=""
標籤:js,vue,開發總結
vuejs開發H5頁面總結
vuejs開發h5頁面總結 關於布局方案 當拿到設計師給的ui設計圖,前端的首要任務就是布局和樣式,相信這對於大部分前端工程師來說已經不是什麼難題了。移動端的布局相對pc較為簡單,關鍵在於對不同裝置的適配。之前介紹了一篇關於移動端rem布局方案,這大致是網易h5的適配方案。不過實踐中發現 開源的可伸...
h5活動是什麼意思 H5活動頁能給你帶來什麼?
現如今隨著網際網路的深入發展,移動營銷已經逐漸成為主題。相比,電視 戶外 廣告等傳統的 已經有逐年下降的趨勢,那麼品牌營銷在數字和移動方面也在逐漸的逐年上公升。在所有的渠道中,移動技術的投入增長的特別的快,遠遠的高於其他的渠道的增長,可見移動的營銷已經溼現如今發展的趨勢。其實h5頁面的主要作用有一下...
h5網頁開發
如果使用vue框架,不足 過渡不行,會出現 使用v html或v cloak解決,注意 務忘記需要分頁的頁面是否需要跳轉前有資料更新需要先修改頁面顯示再跳轉防止返回時的顯示錯誤 如 未讀列表進入詳情,返回後應該是已讀 常見問題 儲存資料不完整導致切換時資料丟失 在進入支付頁前需清除之前遺留資料防止出...