vue实现数据遍历、多个倒计时列表
移动端效果图：
1、HTML显示代码：
1 <template> 2 <div class="activeList"> 3 <div class="list-box" v-for="(item,index) in activeDataList"> 4 <div class="list-title"> 5 <p>{{item.title}}</p> 6 <span>已参加人数 <i class="addpeo">{{item.nowNumber}}</i> / <i>{{item.maxNumber}}</i>人</span> 7 <button :class="item.isSignStart ? 'startBtn' : 'nostartBtn'" v-if="!item.signFinish" @click="goDetail(item.bindid,item.isActiveStart)">我要参加</button> 8 <button class="nostartBtn" v-if="item.isSigned" @click="goDetail(item.bindid,item.isActiveStart)">我已报名</button> 9 <button class="finishBtn" v-if="item.signFinish && !item.isFull">截至报名</button> 10 <button class="finishBtn" v-if="item.isSigned && item.signFinish && !item.isFull">我已报名</button> 11 <button class="finishBtn" v-if="item.isFull">已满额</button> 12 </div> 13 <div class="list-imgarea" @click="goDetail(item.bindid,item.isActiveStart)"> 14 <div class="active-status nostart" v-if="!item.isActiveStart || !item.isSignStart">未开始</div> 15 <div class="active-status signed" v-if="item.isActiveStart || item.isSignStart">已开始</div> 16 <div class="active-status finishBtn" v-if="item.signFinish">已结束</div> 17 <div v-if="!item.signFinish && !item.isSigned" class="active-time"> 18 <span v-if="!item.isSignStart">距开始还剩</span> 19 <span v-if="item.isSignStart">距截至还剩</span> 20 <i>{{item.dd}}</i> 天 <i>{{item.hh}}</i> : <i>{{item.mm}}</i> : <i>{{item.ss}}</i> 21 </div> 22 <img :src="item.imgUrl"/> 23 </div> 24 </div> 25 </div> 26 </template>
2、js逻辑部分代码：
1 <script> 2 import configUrl from '@/config' 3 import { MessageBox } from 'mint-ui' 4 export default{ 5 name:"ActiveList", 6 data(){ 7 return{ 8 activeDataList:[], 9 isInitShowTime:true 10 } 11 }, 12 mounted(){ 13 this.getDataList(); 14 }, 15 methods:{ 16 getDataList(){ 17 var _this = this; 18 var sid = this.$route.query.sid; 20 var url = "activelist.json"; 21 this.$ajax(url).then(function(res){ 22 var myNewData = [] 23 res.data.data.map(((item,index) =>{ 24 myNewData.push(item) 25 _this.$set(item,"ss",_this.getTimeList()) 26 })) 27 _this.activeDataList = myNewData; 28 29 }) 30 .catch(function(err){ 31 MessageBox('提示', '网络错误'); 32 }) 33 }, 34 goDetail(bindid,statu){ 35 this.$router.push({ 36 path:'/ActiveDetail', 37 query:{ //路由传参时push和query搭配使用 ，作用时传递参数 38 sid:this.$route.query.sid, 39 bindid:bindid 40 } 41 }) 42 }, 43 getTimeList(){ 44 var _this = this; 45 setInterval(function(){ 46 for (var key in _this.activeDataList) { 47 if(!_this.activeDataList[key]["isSignStart"]){ 48 var end = new Date(_this.activeDataList[key]["startTime"].replace(/-/g,'/')).getTime(); 49 } 50 else{ 51 var end = new Date(_this.activeDataList[key]["endTime"].replace(/-/g,'/')).getTime(); 52 } 53 var start = new Date().getTime(); 54 var rightTime = end - start; 55 if (rightTime > 0) { 56 var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24); 57 var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24); 58 var mm = Math.floor((rightTime / 1000 / 60) % 60); 59 var ss = Math.floor((rightTime / 1000) % 60); 60 dd = dd > 9 ? dd : '0' + dd 61 hh = hh > 9 ? hh : '0' + hh 62 mm = mm > 9 ? mm : '0' + mm 63 ss = ss > 9 ? ss : '0' + ss 64 _this.activeDataList[key]["dd"] = dd; 65 _this.activeDataList[key]["hh"] = hh; 66 _this.activeDataList[key]["mm"] = mm; 67 _this.activeDataList[key]["ss"] = ss; 68 } 69 else{ 70 _this.activeDataList[key]["dd"] = 0; 71 _this.activeDataList[key]["hh"] = 0; 72 _this.activeDataList[key]["mm"] = 0; 73 _this.activeDataList[key]["ss"] = 0; 74 75 if(_this.activeDataList[key]["isSignStart"] == false){ 76 _this.activeDataList[key]["isSignStart"] = true; 77 } 78 else{ 79 _this.activeDataList[key]["signFinish"] = true; 80 } 81 82 } 83 } 84 },1000); 85 86 } 87 } 88 89 } 90 </script>
