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

瀑布流插件：

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分钟900

      if(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 = col
          console.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>