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,開發總結