瀑布流插件：

import?waterfall?from?'vue-waterfall2'

Vue.use(waterfall)

<div class="seat_box"><div class="seat_background" v-bind:class="{ seat_background2: isChoose }"></div><div class="table_box"><div><waterfall :col='col' :data="data" @loadmore="loadmore" @scroll="scroll" :isTransition=true><template><div class="cell-item" v-for="(item,index) in data" :key=index><p>{{item}}</p><div class="seat"><div class="seat_son" @click="seat_down('1',index)" :class="activeClass == index ? 'active' : ''" ><p>+</p></div><div class="seat_son" @click="seat_down('2',index)" :class="activeClass2 == index ? 'active2' : ''" ><p>+</p></div></div></div></template></waterfall></div></div></div><script> export default {name: 'studentRoom',data () {return {isChoose:false,activeClass: -1, //一開始樣式不顯示activeClass2: -1,data:["坐這里","坐這里","坐這里","坐這里","坐這里","坐這里","坐這里","坐這里","坐這里","坐這里"],col:2, //瀑布流兩列}},created() {var calss1_start2 = Math.round(new Date(new Date(new Date().getTime()).setHours(8,45,0,0))/1000) //獲取當天8點 開始時間//var calss1_start = Math.round(new Date(new Date(new Date().getTime()).setHours(8,0,0,0))/1000)var calss1_end = Math.round(new Date(new Date(new Date().getTime()).setHours(9,0,0,0))/1000) //下課時間//var rest_start = Math.round(new Date(new Date(new Date().getTime()).setHours(9,0,0,0))/1000)var rest_end = Math.round(new Date(new Date(new Date().getTime()).setHours(19,0,0,0))/1000) //休息時間this.endTime = calss1_end;// this.startTime = calss1_start;this.endTime2 = rest_end;// this.startTime2 = rest_start;console.log('我是時間差',calss1_end - calss1_start2 ) //45分鐘 2700 15分鐘900if(this.currentTime >= calss1_start2){console.log("上課啦")this.go_study = true;this.begin();} },methods:{//監聽滾動 判斷背景色scroll(scrollData){if(scrollData.scrollTop>=4){this.isChoose =true//console.log("我移動了")}if(scrollData.scrollTop<=0){this.isChoose =false// console.log("我回去了")}console.log(scrollData)},//瀑布流//列數switchCol(col){this.col = colconsole.log(this.col)},//滾動到底部觸發loadmore(index){this.data = this.data.concat(this.data)},//點擊當前座位 當前座位加頭像 因為我循環是兩個座位用的一個index 所以傳入參數區分seat_down(num,index){if(num ==1){this.activeClass = index;this.activeClass2 = -1;}if(num ==2){this.activeClass = -1;this.activeClass2 = index;} }} } </script><style>.seat_background{width: 100%;height: 90%;background: #FBF0D2;position: fixed;bottom: 0;left: 0; } .seat_background2{width: 100%;height: 100%;background: #FBF0D2;position: fixed;bottom: 0;left: 0; } .cell-item{width: 5rem;height: 3rem;background: #EAC27A;margin-bottom:2rem;text-align: center;line-height: 3rem;margin-left: .5rem;margin-right: .5rem;border-radius: .3rem;border-bottom: .2rem solid #C99659; } .cell-item p{font-size: .9rem;color: #fff; } .seat{display: flex;justify-content: space-around;margin-top:-0.6rem; } .seat_son{width: 1.3rem;height: 1.3rem;line-height: 1.2rem;border-radius: 50%;background: #668679;background-size: 1.3rem 1.3rem;border:.1rem solid #94b8a9; } .active{width: 1.3rem;height: 1.3rem;line-height: 1.2rem;border-radius: 50%;background-image: url("../assets/img/tx.jpg");background-size: 1.3rem 1.3rem;border:.1rem solid #94b8a9; } .active2{width: 1.3rem;height: 1.3rem;line-height: 1.2rem;border-radius: 50%;background-image: url("../assets/img/tx.jpg");background-size: 1.3rem 1.3rem;border:.1rem solid #94b8a9; } .seat_son p{color: #fff;font-size: .9rem; } .seat img{width: 1.3rem;height: 1.3rem;border-radius: 50%; } </style>

?

總結

以上是生活随笔為你收集整理的vue 移动端无限瀑布流 插件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。