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

梦里梦外; 2023-06-25 08:15 39阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]

**瀑布流插件：**

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191227141053425.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70