当前位置: 首页 > 工具软件 > vue-waterfall > 使用案例 >

vue中使用vue-waterfall2来实现瀑布流

刘泰
2023-12-01

在很多项目中,会有图文列表或者图片列表的出现,图片宽度好设定,但是高度往往不能设置成定值,一旦图片长款不成比例,就会显得很难看。

所以使用瀑布流可以完美实现这个问题,图片只需要设定宽度,高度自适应,就可以完美实现。

下边我们来说说怎样来实现------------------这个是针对图片以及带文字的卡片

1:安装

yarn  add  vue-waterfall2

2:引用,在main.js中引用

import waterfall from 'vue-waterfall2'
Vue.use(waterfall)

3:正式使用

  <div class="container-water-fall case">        其中case以及case_item是卡片的样式,                
      <waterfall
        :col="col"---------col:划分几列,可以根据屏幕宽度来划分,其类型是数值型
        :gutterWidth="20"
        :data="list"        list:是请求到的每一页数据,由于分页,获取到的只有当前页数,因此列表循环的时候,使用List,即push上每一次page+1的数据
        @loadmore="loadmore"  当滑到页面底部后,需要加载新的数据
        :lazyDistance="200"
      >
        <template>
          <div
            class="case_item cell-item"
            v-show="List.length!==0"
            v-for="(item) in List"
            :key="item._id"
          >
            <div class="imgs">
              <img
                src="https://scdn.xidong360.com/201909/a20e2e94d1664992abecab9a03afa1f1.png?x-oss-process=style/thumb"
                class="image"
              />
            </div>
            <div class="case_bottom">
              <h6>俱乐部名称</h6>
              <p>在中台产品的研发过程中,会出现不同的设计规范和实现</p>
              <p style="margin:0;">
                <v-btn class="case_action" small  text color="primary">编辑</v-btn>
                <v-btn class="case_action" small  text color="#aaa">删除</v-btn>
              </p>
            </div>
          </div>
        </template>
      </waterfall>
    </div>

  方法:

 1:list与List(只写了部分)

       if (this.page === 1) {
              this.List = [];
              setTimeout(() => {
                this.List = res.data.data;------------当时第一页时,将数据赋值给List
              }, 50);
            } else {
              this.List = this.List.concat(res.data.data);----------当页码大于第一页时,List拼接到后面的数组
            }

 2:col

getcol() {
      if (this.width > 1580) {
        this.col = 4;
      } else if (1024 < this.width < 1580) {
        this.col = 3;
      } else if (768 < this.width < 1024) {
        this.col = 2;
      }
    },

3:loadmore:监听当前页面加载完成-------------该页面使用了watch监听page,因此page++后未调取this.getdata();可根据需要自行调取

loadmore1() {
      if (this.page <= this.length && this.loadmore) {
        this.page++;
      }
},
 类似资料: