练习七、通过elementUi实现图片懒加载以及下拉底部滚动条加载图片

akatsuki七

已于 2023-04-18 00:54:23 修改

阅读量1.9k

点赞数 2

分类专栏：个人练习文章标签： elementui ui javascript

于 2023-04-02 22:16:52 首次发布

本文链接：https://blog.csdn.net/Ak47a7/article/details/129917756

版权

个人练习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.1 功能描述

利用element-ui框架实现照片墙功能显示多张图片，并使用懒加载提高网页首次加载性能，每次滚动条下拉到图片底部加载一张图片，直至满足相应页面需要显示的数量。

2.1 主要考点

2.1.1 运用组件

elment-ui组件的懒加载lazy的运用。（提高首次加载页面的效率）参考官方文档：图片懒加载
elment-ui组件的InfiniteScroll无限加载的运用。（每次下拉加载一张图片）参考官方文档： InfiniteScroll无限加载

2.2.1 基本思路

滚动容器需要固定宽度与高度，再者overflow:auto；需要设置滚动条,图片标签添加lazy属性值，当滚动下一图片时加载图片，这样可以提高页面的首次加载速度;
当进度条滚动到底部时，触发v-infinite-scroll中的load方法。
load方法中，底部打开加载的显示，当图片添加到urls的json数组中时，再隐藏加载的显示。
滚动进度条继续触发v-infinite-scroll
当需要限制加载图片数量，使用infinite-scroll-disabled中的disabled。
computed来侦听数据属性disabled是否为ture，判断两个条件：1）this.loading是否为true（需要加载图片状态） 2）noMore是否为true（数量是否超过10）

3.1 踩到的坑

问题1：初步添加图片懒加载代码，图片没有滚动效果。
回答1：再次查看官方文档，要在上级node节点添加overflew:auto;才可以实现滚动。
———————————
问题2：为什么在无限加载中，infinite-scroll-disabled的变量disabled，需要放在computed中？
回答2：computed是用来监听一个属性受多个属性影响，即现在disabled需要受到loading以及图片json数组的长度两种属性影响。外加watch是用来监听一组数据影响多个数据，后期需要对这两个生命周期进行进一步的探讨以及学习。

4.1 相应框架或语言

语言：html,js,css
框架：elemnet-ui,vue 2.0

5.1 相关代码

<template>
  <div class="stylebg">
    4/2
    <div class="swiperView" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
      <el-image class="pic" v-for="(item,index) in urls" :key="index" :src="item.url" lazy></el-image>
      <div v-if="loading" class="textView">
        <img class="loadingIcon" src="@/assets/loadingGif.gif"></img>
      </div>
      <p v-if="noMore" class="textView">没有更多了</p>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      loading: false,
      urls: [
          {
            id:1,
            url:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
          },
          {
            id:2,
            url:'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
          },
          {
            id:3,
            url:'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg'
          },
          {
            id:4,
            url:'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
          },
          {
            id:5,
            url:'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
          },
          {
            id:6,
            url:'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
          },
          {
            id:7,
            url:'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
          }
        ]
    }
  },
  mounted(){
  },
  computed: {
    noMore () {
      return this.urls.length >= 10
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods: {
    load () {
      this.loading = true
      //使用定时器给图片对象末尾添加一张图片
      setTimeout(() => {
        this.urls.push({
          url:'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
        })
        this.loading = false
      }, 2000)
    }
  }
}
</script>

<style lang="less" scoped>
  .swiperView{
    height: 500px;
    overflow:auto;
    .pic{
      width:100%;
    }
  }

  .textView{
    width:100%;
    text-align: center;
    .loadingIcon{
      width: 50px;
      height: 50px;
    }
  }
</style>