VUE-waterfall瀑布流组件使用

最新推荐文章于 2024-06-20 09:35:21 发布
最新推荐文章于 2024-06-20 09:35:21 发布
阅读量5.3k 收藏 26
点赞数 5
分类专栏： Vue 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39311719/article/details/118567179
版权

1.安装依赖：

npm i vue-waterfall2@latest --save

2.全局引入：

import waterfall from 'vue-waterfall2'

Vue.use(waterfall)

3.waterfall.vue：

<template>
  <div class="container-water-fall">
    <waterfall
      :col="col"
      :data="data"
      @loadmore="loadmore"
      :lazy-distance="20"
      :load-distance="300"
      :gutterWidth="gutterWidth"
    >
      <template>
        <div class="cell-item" v-for="(item, index) in data" :key="index">
          <img v-if="item.img" :lazy-src="item.img" alt="加载错误" />
          <div class="item-body">
            <div class="item-desc">{{ item.title }}</div>
            <div class="item-footer">
              <div
                v-if="item.avatar"
                class="avatar"
                :style="{ backgroundImage: `url(${item.avatar})` }"
              ></div>
              <div class="name">{{ item.user }}</div>
              <div class="like" :class="item.liked ? 'active' : ''">
                <i></i>
                <div class="like-total">{{ item.like }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </waterfall>
    <loading :show="loading" />
  </div>
</template>

<script>
/*
  注意:
  1.itemWidth需要与gutterWidth一起使用才会生效，否则会进行自适应宽度
  2.使用了waterfall的组件不允许使用scoped,否则样式会有问题
*/
// import Vue from 'vue'
import loading from "./loading";
export default {
  props: {
    title: String,
  },
  components: {
    loading,
  },
  data() {
    return {
      data: [],
      col: 4,
      loading: false,
      gitHubData: {},
      originData: [
        {
          img: "https://image.watsons.com.cn//upload/771082d6.png?w=337&h=449&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "让肌肤喝饱水！（学生党必备的平价好物）",
          user: "illusionwing",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/71325866.jpg?w=850&h=566&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "夏天用这款姨妈巾，让你体验真正的清爽",
          user: "迷人的小妖精迷人的小妖精",
          like: "952",
        },
        {
          img: "https://image.watsons.com.cn//upload/607c601d.jpg?w=750&h=956&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "让肌肤喝饱水！（学生党必备的平价好物）",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/a2c613bf.png?w=600&h=800&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "肌龄重返18岁！一起来沐浴吧！！",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/c3654a26.jpg?w=750&h=750&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "夏天用这款姨妈巾，让你体验真正的清爽",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/6fa0c632.jpg?w=750&h=750&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "夏天用这款姨妈巾，让你体验真正的清爽",
          user: "illusionwing",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/1c5bcbf1.JPG?w=977&h=1180&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "真的是万能.超级实用.包包必备单品! ! !",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/31a278eb.JPG?w=828&h=1104&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "最近浴室新宠，日系神仙好物了解一下～",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/78011339.JPG?w=750&h=729&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
          user: "illusionwing",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/2029532c.JPG?w=750&h=995&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "肌龄重返18岁！一起来沐浴吧！！",
          user: "迷人的小妖精迷人的小妖精123",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/a95efb35.JPG?w=800&h=800&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "让肌肤喝饱水！（学生党必备的平价好物）",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/953d3a69.JPG?w=744&h=992&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
          user: "illusionwing",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/526d0914.JPG?w=1080&h=1080&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "真的是万能.超级实用.包包必备单品! ! !",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/9961a12e.JPG?w=1110&h=1280&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试1",
          user: "迷人的小妖精迷人的小妖精123",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/76de81ab.jpg?w=750&h=974&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/3b45f8a6.png?w=744&h=682&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "让肌肤喝饱水！（学生党必备的平价好物）",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/d227f355.jpg?w=1080&h=1089&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/5f4f379b.jpg?w=750&h=750&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "真的是万能.超级实用.包包必备单品! ! !",
          user: "迷人的小妖精迷人的小妖精123",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/1ac4b12f.jpg?w=864&h=1152&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "真香警告！唇釉也能KO猪油嘴",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/4e42f592.jpg?w=750&h=976&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "最近浴室新宠，日系神仙好物了解一下～",
          user: "illusionwing",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/31c2723e.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "真的是万能.超级实用.包包必备单品! ! !",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/5941cd81.png?w=376&h=490&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
          user: "迷人的小妖精迷人的小妖精123",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/63e84429.jpg?w=686&h=705&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "真的是万能.超级实用.包包必备单品! ! !",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/241244b5.jpg?w=1000&h=1000&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "肌龄重返18岁！一起来沐浴吧！！",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/7a63d5ba.JPG?w=690&h=666&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/e9047336.jpg?w=750&h=736&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "真香警告！唇釉也能KO猪油嘴",
          user: "迷人的小妖精迷人的小妖精123",
          like: "953",
        },
      ],
    };
  },
  computed: {
    itemWidth() {
      return 133 * 0.5 * (document.documentElement.clientWidth / 375);
    },
    gutterWidth() {
      return 10 * 0.5 * (document.documentElement.clientWidth / 375);
    },
  },
  methods: {
    loadmore(num) {
      // Vue.set(this.data[index],'liked',true)
      // const obj = {c:123,d:456}
      // const {c:a,d:b} = obj
      console.log("loadmore");
      this.loading = true;
      setTimeout(() => {
        this.data = this.data.concat(
          this.originData,
          this.originData,
          this.originData
        );
        this.loading = false;
        // console.log(this.data.length)
      }, 1000);
      // this.$waterfall.resize()
    },
  },
  created() {
    var self = this;
    this.data = [
      {
        img: "https://image.watsons.com.cn//upload/8a316140.png?w=377&h=451&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "最近浴室新宠，日系神仙好物了解一下～",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/5c3e51e4.jpg?w=720&h=960&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "真的是万能.超级实用.包包必备单品! ! !",
        user: "迷人的小妖精迷人的小妖精",
        like: "952",
      },
      {
        img: "https://image.watsons.com.cn//upload/bef41e67.JPG?w=712&h=534&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/13afe9a7.jpg?x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "夏天用这款姨妈巾，让你体验真正的清爽",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/642cb83c.jpeg?w=1080&h=1080&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/98c7c4c3.jpg?w=1210&h=1210&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/25ab20fe.JPG?w=1000&h=1200&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "夏天用这款姨妈巾，让你体验真正的清爽",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/92761043.JPG?w=1000&h=999&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/31e42833.jpg?w=750&h=750&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "我想喝你的洗澡水！",
        user: "MFF",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/02a4f38d.jpg?w=1067&h=1067&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/9d5d58d0-7f91-5792-b8e3-25b13b5c1807?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "夏天用这款姨妈巾，让你体验真正的清爽",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/92761043.JPG?w=1000&h=999&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/7e4df2f1-a364-59e7-b7a8-b165abbecd69?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/da61c0f5.jpg?w=959&h=958&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精123",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/eb971d00-05ab-5b2a-ba03-52d8f544c42b?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "夏天用这款姨妈巾，让你体验真正的清爽",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/9d5d58d0-7f91-5792-b8e3-25b13b5c1807?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/589585c1.jpeg?x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/60cc9b8e.jpg?w=991&h=744&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/4a3c1788.jpg?w=823&h=1000&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "夏天用这款姨妈巾，让你体验真正的清爽",
        user: "MFF",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/7e4df2f1-a364-59e7-b7a8-b165abbecd69?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/d862d932.jpg?w=1080&h=1440&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "真的是万能.超级实用.包包必备单品! ! !",
        user: "迷人的小妖精迷人的小妖精123",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/0a89e6b7.jpg?w=1080&h=1920&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/97247d43-f7ab-5755-a6a6-c5e6c293442f?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "夏天用这款姨妈巾，让你体验真正的清爽",
        user: "MFF",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/b709ed72.jpg?w=552&h=414&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/19216d62-09cd-5d00-8116-0d60c9fb9102?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "夏天用这款姨妈巾，让你体验真正的清爽",
        user: "迷人的小妖精迷人的小妖精123",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/eb4fb58f.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/97247d43-f7ab-5755-a6a6-c5e6c293442f?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/99253111.jpg?w=1080&h=1920&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/19216d62-09cd-5d00-8116-0d60c9fb9102?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "最近浴室新宠，日系神仙好物了解一下～",
        user: "迷人的小妖精迷人的小妖精123",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/fcd68df4.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "夏天用这款姨妈巾，让你体验真正的清爽",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/99253111.jpg?w=1080&h=1920&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "夏天用这款姨妈巾，让你体验真正的清爽",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/97247d43-f7ab-5755-a6a6-c5e6c293442f?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/dce45845.png?w=1080&h=1438&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "真的是万能.超级实用.包包必备单品! ! !",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/19216d62-09cd-5d00-8116-0d60c9fb9102?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "夏天用这款姨妈巾，让你体验真正的清爽",
        user: "MFF",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/589585c1.jpeg?x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/415f984f.jpeg?w=828&h=1104&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "最近浴室新宠，日系神仙好物了解一下～",
        user: "迷人的小妖精迷人的小妖精123",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/9d5d58d0-7f91-5792-b8e3-25b13b5c1807?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "真的是万能.超级实用.包包必备单品! ! !",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/137b50b0.jpg?x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title:
          "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/54c5d7b4.jpg?w=828&h=991&x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
        user: "MFF",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/19216d62-09cd-5d00-8116-0d60c9fb9102?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "夏天用这款姨妈巾，让你体验真正的清爽",
        user: "迷人的小妖精迷人的小妖精123",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/9d5d58d0-7f91-5792-b8e3-25b13b5c1807?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "最近浴室新宠，日系神仙好物了解一下～",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/97247d43-f7ab-5755-a6a6-c5e6c293442f?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "真的是万能.超级实用.包包必备单品! ! !",
        user: "迷人的小妖精迷人的小妖精",
        like: "953",
      },
      {
        img: "https://image.watsons.com.cn//upload/71d19462.jpg?x-oss-process=image/resize,w_1080",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "夏天用这款姨妈巾，让你体验真正的清爽",
        user: "MFF",
        like: "953",
      },
      {
        img: "https://ci.xiaohongshu.com/19216d62-09cd-5d00-8116-0d60c9fb9102?imageView2/2/w/400/q/50/format/jpg",
        avatar:
          "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
        title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
        user: "迷人的小妖精迷人的小妖精123",
        like: "953",
      },
    ];
    if(document.documentElement.clientWidth<800){
        this.col = 2
    }
  },
};
</script>
<style  lang="less" scoped>
* {
  margin: 0;
}
.container-water-fall {
  padding-top: 30px;
  box-sizing: border-box;
  h4 {
    padding-top: 56px;
    padding-bottom: 28px;
    font-family: PingFangSC-Medium;
    font-size: 36px;
    color: #000000;
    letter-spacing: 1px;
    text-align: justify;
  }
  button {
    // background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
    background-color: yellow;
    color: #24292e;
    border: 1px solid rgba(27, 31, 35, 0.2);
    border-radius: 0.25em;
    width: 100px;
    line-height: 26px;
    font-size: 13px;

    margin: 4px 0;
    margin-right: 4px;
    cursor: pointer;
    outline: none;
    &.blue-light {
      background: #27fbc2;
    }
  }
  button:hover {
    background-image: linear-gradient(-180deg, #fafbfc, #ccc 90%);
  }
  .cell-item {
    width: 100%;
    // margin-bottom: 18px;
    background: #ffffff;
    border: 2px solid #f0f0f0;
    border-radius: 12px 12px 12px 12px;
    overflow: hidden;
    box-sizing: border-box;
    img {
      // border-radius: 12px 12px 0 0;
      width: 100%;
      height: auto;
      display: block;
    }
    .item-body {
      // border: 1px solid #F0F0F0;
      padding: 12px;
      .item-desc {
        font-size: 15px;
        color: #333333;
        line-height: 15px;
        font-weight: bold;
      }
      .item-footer {
        margin-top: 22px;
        position: relative;
        display: flex;
        align-items: center;
        .avatar {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          background-repeat: no-repeat;
          background-size: contain;
        }
        .name {
          max-width: 150px;
          margin-left: 10px;
          font-size: 14px;
          color: #999999;
        }
        .like {
          position: absolute;
          right: 0;
          display: flex;
          align-items: center;
          &.active {
            i {
            }
            .like-total {
              color: #ff4479;
            }
          }
          i {
            width: 28px;
            display: block;
          }
          .like-total {
            margin-left: 10px;
            font-size: 12px;
            color: #999999;
          }
        }
      }
    }
  }
}
.githubdata {
  float: right;
  margin-right: 90px;
  img {
    width: 14px;
    // height: 16px;
  }
}
.action {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  background: white;
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;
}
</style>

4.loading.vue

<template>
	<div class="loader-layer" :class="show?'active':''">
		<div class="spinner">
		  <div class="double-bounce1"></div>
		  <div class="double-bounce2"></div>
		  loading...
		</div>
	</div>
</template>
<script>
	export default{
		props:['show']
	}
</script>
<style scoped>
.loader-layer{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: white;
	
	transition: all 0.6s;
	opacity: 0;
	-webkit-opacity: 0;
	-o-opacity: 0;
	-ms-opacity: 0;
	-moz-opacity: 0;
	visibility: hidden;

	filter:alpha(opacity=0);
}
.loader-layer.active{
	visibility:visible;
	opacity: 1;
	-webkit-opacity: 1;
	-o-opacity: 1;
	-ms-opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}

.spinner {
  width: 120px;
  height: 120px;
  text-align: center;
  line-height: 120px;
 
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  white-space: nowrap;
  overflow: hidden;

}
 
.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #1ABC9C;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
   
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}
 
.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
 
@keyframes bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

@keyframes loading{
	from{
		opacity: 0
	}
	to{
		opacity: 1;
	}
}
</style>

waterfall相关API：

静纸~
关注
  • 5
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue瀑布流组件vue-waterfall-easy的使用
qq_2422941992的博客
12-31 856
1、安装vue-waterfall-easy组件 npm install vue-waterfall-easy --save-dev 2、在所需要使用的页面中引入该组件并编写相关业务逻辑代码 <template> <div> <vue-waterfall-easyv-show="!noData&&loadingShow"ref="waterfall"@scrollReachBottom="getData":imgsArr="img...
vue瀑布流组件(vue-waterfall-easy 2.x)
02-21
vue瀑布流组件(vue-waterfall-easy 2.x) 这是一个vue组件，包含瀑布流布局和无限滚动加载 与其他实现相比，无需在返回的数据中指定图像的宽度和高度 正是因为有了第二项，图像才被预加载，然后进行布局 响应式...
vue 瀑布流插件 vue-waterfall-easy ； vue-waterfall； vue-waterfall2
xlsl
07-28 2556
vue-waterfall-easy ； vue-waterfall； vue-waterfall2
探索 wc-waterfall：高性能瀑布流组件的未来
最新发布
gitblog_00054的博客
06-20 433
探索 wc-waterfall：高性能瀑布流组件的未来 项目地址:https://gitcode.com/huodoushigemi/wc-flow-layout 在Web开发的世界里，高效且易于集成的组件是每个开发者梦寐以求的工具。今天，我们向您介绍一款名为wc-waterfall的开源组件，它是一个用web-component编写的强大瀑布流组件，能在React、Vue和SolidJs等框架中...
使用 vue-waterfall2插件 vue 瀑布流
2401_84419493的博客
05-01 1102
千万不要去乱尝试”,title: “千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试”,title: “千万不要去乱尝试贵妇级好用的水乳有哪些呢？title: “千万不要去乱尝试贵妇级好用的水乳有哪些呢？title: “150元搞定全套护肤品，这些护肤好物必须交出来！title: “最近浴室新宠，日系神仙好物了解一下～”,title: “最近浴室新宠，日系神仙好物了解一下～”,title: “最近浴室新宠，日系神仙好物了解一下～”,title: “最近浴室新宠，日系神仙好物了解一下～”,
vue2 瀑布流 vue-waterfall-easy
sunzan0227的博客
08-16 447
recordList 是个数组 里面必须有src键 指对。
使用 vue-waterfall2插件 vue 瀑布流(1)
2401_84419493的博客
05-01 1029
avatar:title: “最近浴室新宠，日系神仙好物了解一下～”,user: “迷人的小妖精迷人的小妖精”,},img:avatar:title: “夏天用这款姨妈巾，让你体验真正的清爽”,user: “迷人的小妖精迷人的小妖精”,},img:avatar:title: “150元搞定全套护肤品，这些护肤好物必须交出来！”,user: “迷人的小妖精迷人的小妖精123”,},img:avatar:title: “最近浴室新宠，日系神仙好物了解一下～”,
vue-waterfall2瀑布流使用及坑
furfur-jiang的博客
06-03 3852
效果展示 出现问题 右侧出现两层滚动栏： 解决* { margin: 0; } 不响应式，直接拉取整个项目尝试后解决，官方文档内容无效 使用： 直接初始化一个vue项目 npm install npm install --save vue-waterfall2 main.js引入 Vue.config.productionTip = false import waterfall from 'vue-waterfall2' App.vue <template> <div
vue-waterfall2 基于Vue.js 瀑布流组件
我的乌托
12-15 1576
vue-waterfall2 1.宽度自适应,数据绑定特效(适用于上拉加载更多) 2.自定义程度高 3.使用极为简便,适用于PC/移动端 4.提供resize(强制刷新布局-适用于下拉刷新)/mix(扰乱布局) API，一般情况下不需要用到 5.后期将持续更新，提供animation（过渡动画） Demo DEMOGITHUB Installation npm install --save ...
vue 实现瀑布流布局的 组件/插件总汇：vue-waterfall、vue-waterfall-easy、vue-virtual-collection、vue-grid-layout
愿我如星君如月 ... 夜夜流光相皎洁 ...
05-16 4858
转自：http://www.fly63.com/article/detial/1134 瀑布流作为当前比较流行的一种网页布局方式，在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果，该布局随着页面滚动，数据不断加载并附加至当前页面的尾部。这篇文章主要介绍关于vue框架中常使用的瀑布流组件，大家根据需求来进行选择。 一、vue-waterfall waterfall是一个vue.js瀑布流布局组...
最流畅vue瀑布流组件vue-waterfall-rapid
m0_37829511的博客
01-26 593
vue-waterfall-rapid 一款基于vue的瀑布流组件，支持各种使用场景，灵活度高，简单易用。 1.支持没有图片高度 && 不影响渲染速度。 2.支持自由绑定动画。 3.支持根据容器改变自适应。 4.支持无图。 Demo https://1977474741.github.io/vue-waterfall-rapid/demo/#/ github：https://github.com/1977474741/vue-waterfall-rapid 使用 1.安装 npm i vu
vue.js组件vue-waterfall-easy实现瀑布流效果
12-12
总的来说，Vue-waterfall-easy 提供了一个易于使用的解决方案，帮助开发者快速实现瀑布流效果，无需深入理解复杂的布局算法。只需简单的配置和调用，就能在 Vue.js 应用中享受到流畅的瀑布流体验。
kuan-vue-waterfall:vue3.0瀑布流插件
05-12
kuan-vue-waterfall （vue3.0 瀑布插件）不需要设置内容高度，间隙默认 0注意：如果没有图片需要延迟获取元素尺寸的话，可以设置delay=false，等待图片加载后显示元素体验比较差安装yarn add kuan-vue-waterfall# ...
Vue.js下的瀑布流组件vue-waterfall.zip
07-19
Vue.js 下的瀑布流组件。ES5、ES6、UMD 兼容。享受数据驱动带来的便利，让事情变得简单。 标签：vuewaterfall
Vant的Tabbar标签栏引入自定义图标
weixin_39311719的博客
05-27 5117
**使用*van-tabbar*组件** *v-model*绑定的是对应的Tabbar下标 *active-color*是未选中的文字颜色 *inactive-color*是已选中的文字颜色 **route**这个要特别注意，我就是在这踩了坑，我没有加这个参数，但是能正常跳转路由，但是图标选中会出现问题，每次都需要双击。一直以为是插槽的问题，后面才发现官方api的这个参数 *van-tabbar-item*每一个Tab标签 #icons 自定义图标的插槽 props.active 插槽的值，点击后为
webstorm的JS文件全部报错，解决方法
weixin_39311719的博客
10-12 1636
好久没写了，今天开始坚持记录每天工作遇到问题的解决方法 File----Settings----Languages & Frameworks------- JSHint/JSLint 将Enable的勾选给去掉即可
vue项目查看脚手架版本报错
weixin_39311719的博客
07-01 756
报错原因： windows下运行*.ps1脚本（powershell的脚本）的时候，需要设置执行权限 set-executionpolicy remotesigned 解决方法： 1.在电脑搜索栏搜索powershell（管理员身份打开） 2.输入set-ExecutionPolicy RemoteSigned，回车，然后输入Y 3.再次输入vue -V则可以正常运行该命令 ...
网站全局样式置灰
weixin_39311719的博客
07-22 143
在页面的body标签中加上filter:grayscale(100%)样式即可 <bodystyle="filter:grayscale(100%)">
vue-waterfall2 触底加载
06-07
vue-waterfall2 是一个 Vue.js 的瀑布流组件，可以实现类似 Pinterest 的布局效果。要实现触底加载功能，需要在组件中监听滚动事件，判断滚动条是否到达底部，然后触发加载更多数据的方法。 以下是一个简单的示例代码： ```vue <template> <waterfall :list="list" :options="options" @scroll="handleScroll"></waterfall> </template> <script> import Waterfall from 'vue-waterfall2' export default { components: { Waterfall }, data() { return { list: [], // 列表数据 options: { // 瀑布流配置项 }, currentPage: 1, // 当前页码 isEnd: false, // 是否已经加载完所有数据 } }, mounted() { this.loadMore() }, methods: { loadMore() { if (this.isEnd) return // 发送请求获取数据，这里假设返回一个 Promise 对象 fetchData(this.currentPage).then((data) => { if (data.length) { this.list = this.list.concat(data) this.currentPage++ } else { this.isEnd = true } }) }, handleScroll(position) { // 监听滚动事件 const { maxY } = position if (maxY <= window.innerHeight) { this.loadMore() } }, }, } </script> ``` 在这个示例中，我们定义了一个 `list` 数组来存放列表数据，`options` 对象用来配置瀑布流效果。在 `mounted` 钩子函数中，我们首次加载数据。`loadMore` 方法用来加载更多数据，其中 `fetchData` 方法用来发送网络请求获取数据。在 `handleScroll` 方法中，我们监听了 `waterfall` 组件的滚动事件，当滚动到底部时触发加载更多数据的方法。`isEnd` 变量用来判断是否已经加载完所有数据，避免重复请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值