vue 移动端无限瀑布流 插件使用

瀑布流插件：

importwaterfallfrom'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>