当前位置:首页 > 网站建设 > 建站交流 > 正文内容

第一次写滚动加载的vue瀑布流

热淘网11个月前 (09-15)建站交流244
第一次博客,因为公司项目需求就自己写了一个滚动加载的vue瀑布流,总感觉哪里有问题,请各位大神指点指点

<template>
    <div id="app">
        <div @scroll="skinwheel($event)">
            <div ref="gridBoxClass">
                <div v-for="item in images" :key="item.id" ref="gridImg">
                    <p><img :src="item.imgurl" ref="images"></p>
                    <h2>图片的简洁</h2>
                    <p>图片详情</p>
                    <p>作者</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            images: null,
            lock: true,
            loadImg: 1
        }
    },
    created() {
        this.axios.get('/api/text/json1.txt').then((res) => {
            this.images = res.data.news;

        })
    },
    updated() {
        let image = new Image()
        for (let i = 0; i < this.images.length; i++) {
            image.src = this.images[i].imgurl

        }
        let imageArray = [0, 0, 0]
        image.onload = () => {

            for (let j = 0; j < this.$refs.gridImg.length; j++) {

                let gridHeight = this.$refs.gridImg[j].clientHeight;
                let min = Math.min(...imageArray);
                let minIndex = imageArray.indexOf(min)
                this.$refs.gridImg[j].style.top = imageArray[minIndex] + 'px'
                this.$refs.gridImg[j].style.left = minIndex * 270 + 'px'
                imageArray[minIndex] += gridHeight

            }

        }
    },
    methods: {
        skinwheel(event) {
            if (!this.lock) return;
            let vm = this
            let height = event.target.clientHeight;
            let scrollTop = event.target.scrollTop
            let clientHeight = parseInt(this.$refs.gridImg[this.$refs.gridImg.length - 1].style.top) + parseInt(this.$refs.gridImg[this.$refs.gridImg.length - 1].clientHeight)
            var skinscroll = (height + scrollTop) / clientHeight >= 0.7 ? true : false;
            if (skinscroll) {
                this.lock = false;
                this.loadImg++
                this.axios.get(`/api/text/json${this.loadImg}.txt?t=${Date.now()}`).then(function (res) {
                    var data;
                    if (typeof res.data == 'string') {
                        data = JSON.parse(res.data)
                    } else {
                        data = res.data
                    }
                    if (data.news.length != 0) {

                        vm.images.push(...res.data.news)
                        vm.lock = true
                    }
                })

            }


        },
    },
    watch: {

    }
}
</script>
<style>
* {
    margin: 0;
    paddimg: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 1000px;
    margin: 0 auto;
    height: 100%;
    position: relative;
    overflow: hidden;

    .gridBox {
        position: relative;
        width: 105%;
        height: 100%;
        overflow: auto;
        paddimg-right: 2%;
        box-sizing: border-box;

        .gridBoxClass {
            position: relative;
            height: 100%;

            .grid {
                position: absolute;
                width: 250px;
                margin-right: 20px;

                .detail {
                    padding: 20px;
                }

                .author {
                    text-align: right;
                }

                .img {
                    width: 250px;
                }
            }
        }
    }
}
</style>

因为公司需求不要jQuery,所以都是用ref获取高度

<p>扫描二维码推送至手机访问。</p><p>版权声明:本文由<strong>网站标题</strong>发布,如需转载请注明出处。</p>

本文链接:https://blog.retao5.com/jianzhan/1402.html

分享给朋友:

相关文章

FlashFXP4.2汉化破解版

FlashFXP4.2汉化破解版

[b]FlashFXP破解版[/b]是功能强大的FXP/FTP软件,融合了一些其他优秀[b]FTP软件[/b]的优点,如像CuteFTP一样可以比较文件夹,支持彩色文字显示;像 BpFTP支持多文件夹...

免备案香港节点cdn加速,限时流量免费魔门云

免备案香港节点cdn加速,限时流量免费魔门云

之前的博文中也有分享过不少提供免费网站CDN加速服务的商家,比如我们较为熟悉的云盾、360网站卫士、安全宝等等服务商。无论是提供免费服务方案还是升级付费服务,大部分商家都需要网站BA才可以使用速度较好...

Angular-使用Angular CLI快速搭建框架

Angular-使用Angular CLI快速搭建框架

什么是Angular?是一款优秀的前端JS框架,AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等,AngularJS 是一个 JavaScrip...

SuperSlide-网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!

SuperSlide-网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!

SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。 网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个Su...

Linux Mariadb/MySQL的配置优化

Linux Mariadb/MySQL的配置优化

1.关闭那么没有使用的InnoDB MEMORY等其他引擎 2.数据库索引 索引的缺点:极大地加速了查询,减少扫描和锁定的数据行数。 索引的缺点:占用磁盘空间,减慢了数据...

飞天侠 如何查询cat? cat值

飞天侠 如何查询cat? cat值

采集器配置的时候要求输入淘宝分类的CAT值,很多人不知道怎么查看这个CAT值。 第一步 打开:http://list.taobao.com/browse/cat-0.ht...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。