vue-waterfall2瀑布流使用及坑

效果展示出现问题右侧出现两层滚动栏：解决* {margin: 0;}不响应式，直接拉取整个项目尝试后解决，官方文档内容无效使用：直接初始化一个vue项目npm installnpm install --save vue-waterfall2main.js引入Vue.config.productionTip = falseimport waterfall from 'vue-waterfall2'A

furfur-jiang

3940人浏览 · 2021-06-03 11:31:56

furfur-jiang · 2021-06-03 11:31:56 发布

效果展示
在这里插入图片描述

在这里插入图片描述

出现问题

右侧出现两层滚动栏：
解决* {
margin: 0;
}
或
删除waterfall的:height="‘100vh’"即可
不响应式，直接拉取整个项目尝试后解决，官方文档内容无效
原因：itemWidth和gutterWidth不能写，否则不会自动撑开

使用：
直接初始化一个vue项目

npm install
npm install --save vue-waterfall2

main.js引入

Vue.config.productionTip = false
import waterfall from 'vue-waterfall2'

App.vue

<template>
    <div class="container-water-fall">
        <!-- <h1 style="position: fixed;left: 0;top: 100px;font-style: 15px;color:blue;z-index: 1000;">{{loadstatus}}</h1> -->
        <!-- <div class="btn-group"><button style="width:250px;"  class="blue-light"><router-link to="/lazy">To Lazy Demo (前往懒加载Demo)</router-link></button> <button @click="loadmore">LoadMore</button><button @click="switchCol(5)">5column(列)</button> <button @click="switchCol(8)">8column(列)</button> <button @click="switchCol(10)">10column(列)</button> <button @click="reset">reset(重置)</button> <a style="color:red;" href="https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md" target="_blank" >GITHUB</a> <b style="color:blue">滚动至底部可触发loadmore</b> -->

        <!-- <div class="githubdata" @click="toGitHub"><button  class="blue-light"><img src="../assets/star.png"  /> Star <span>{{gitHubData.stargazers_count}}</span></button><button  class="blue-light"><img src="../assets/fork.png"  /> Fork <span>{{gitHubData.forks_count}}</span></button></div>  </div> -->
        <waterfall
            :col="col"
            :data="data"
            @scroll="scroll"
            @finish="finish"
            :height="'100vh'"
        >
            <template>
                <div
                    class="cell-item"
                    v-for="(item, index) in data"
                    :key="index"
                >
                    <img v-if="item.img" :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>
import json from "./components/data.json";
export default {
    name: "App",
    /*
  注意:
  1. gutterWidth需要与width一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出自适应后的宽度再传值)
  2. 使用了`waterfall`的父组件,如果样式存在问题，可去掉css `scoped`尝试一下
*/
    data() {
        return {
            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",
                },
            ],
            col: 5,
        };
    },
    computed: {
        itemWidth() {
            return 138 * 0.5 * (document.documentElement.clientWidth / 375); //rem布局 计算宽度
        },
        gutterWidth() {
            return 9 * 0.5 * (document.documentElement.clientWidth / 375); //rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
        },
    },
    methods: {
        scroll(scrollData) {
            console.log(scrollData);
        },
        switchCol(col) {
            this.col = col;
            console.log(this.col);
        },
        // loadmore(index) {
        //     this.data = this.data.concat(this.data);
        // },
    },
};
</script>

<style>
* {
    margin: 0;
}
.cell-item {
    width: 100%;
    margin-bottom: 10px;
    background: #ffffff;
    border: 2px solid #f0f0f0;
    border-radius: 12px 12px 12px 12px;
    overflow: hidden;
    box-sizing: border-box;
}
img {
    width: 100%;
    height: auto;
    display: block;
}
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...