都2023年,还在这样写下拉刷新你就out了。

sxc_

已于 2023-02-27 21:36:06 修改

阅读量196

点赞数 2

文章标签： javascript 前端 Powered by 金山文档

于 2023-02-19 12:16:03 首次发布

本文链接：https://blog.csdn.net/sxc__/article/details/129108698

版权

下拉刷新在前端是非常常见的一个场景,我们常用的是对滚动的元素进行一个监听,去判断其是否滚动到了底部，从而再次获取数据，进行渲染。

那么这种方式有什么缺点呢,滚动的事件是不是触发的太多的,每一次滚动我们都要去进行判断他是否到了底部,性能不是很好，今天我来给大家介绍一个新方法。

官方的检查者这是官网地址,

IntersectionObserver为一个构造函数,这是官方考虑到下拉刷新场景很多创建出来的,其有两个主要的参数,第一个参数为函数,第二个参数这是配置对象,

         var ob = new IntersectionObserver(function(call){
             //call为一个数组,其中每一项都会去有一个属性,通过isIntersecting这一属性来判断其是否是进入
             //true为进入,false为离开
            if(call[0].isIntersecting && !this.isloading){
            //isloading为我写的属性，因为如此时不进行判断会发现一进来就触发了监听者,这是因为一开始没有               //数据,loading图标直接就会与视图重叠,loading属性一开始为false,调用加载方法后为true，完               //成后又为false
              that.GetImgArrFn()
            }
          },{
            root:null,//观察起于那个元素进行了重叠,不写的话或者为null则观察是否与整个窗口进行了重叠。
            threshold:0.1//重叠的比列为
          })

最后源码奉上

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li,
      ul {
        list-style: none;
      }
      div {
        display: -webkit-box;
      }
      #main {
        margin: auto;
        display: flex;
        justify-content: flex-start;
        flex-flow: row wrap;
        padding-left: 400px;
        padding-right: 400px;
        padding-bottom: 160px;
        position: relative;
      }
      li {
        width: 20%;
        height: 260px;
        margin-top: 30px;
        margin-left: 15px;
        margin-right: 15px;
        overflow: hidden;
      }
      li img {
        width: 100%;
        height: 200px;
      }
      li .title {
        white-space: nowrap;
        text-align: center;
        line-height: 30px;
        font-size: 16px;
        height: 30px;
        color: #666;
        display: inline-block;
        width: 100%;
        text-overflow: ellipsis;
      }
      .grade {
        color: orange;
        display: inline-block;
        width: 100%;
        text-align: center;
      }
      #loading {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <ul id="main">
      <li v-for="item in ImgArr">
        <img :src="item.poster" alt="" />
        <span class="title">{{item.name}}</span>
        <span class="grade">{{item.grade}}</span>
      </li>
      <svg
        v-show="loadingShow"
        id="loading"
        t="1676776426538"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2814"
        width="200"
        height="200"
      >
        <path
          d="M393.664871 495.52477c0 11.307533-9.168824 20.466124-20.466124 20.466124l-103.671151 0c-11.307533 0-20.466124-9.15859-20.466124-20.466124 0-11.2973 9.15859-20.466124 20.466124-20.466124l103.671151 0C384.496048 475.058646 393.664871 484.22747 393.664871 495.52477z"
          p-id="2815"
        ></path>
        <path
          d="M805.207925 495.52477c0 11.307533-9.15859 20.466124-20.466124 20.466124l-103.671151 0c-11.2973 0-20.466124-9.15859-20.466124-20.466124 0-11.2973 9.168824-20.466124 20.466124-20.466124l103.671151 0C796.049335 475.058646 805.207925 484.22747 805.207925 495.52477z"
          p-id="2816"
        ></path>
        <path
          d="M547.600823 237.917668l0 103.671151c0 11.307533-9.15859 20.466124-20.466124 20.466124s-20.466124-9.15859-20.466124-20.466124l0-103.671151c0-11.307533 9.15859-20.466124 20.466124-20.466124C538.442232 217.451544 547.600823 226.610134 547.600823 237.917668z"
          p-id="2817"
        ></path>
        <path
          d="M547.600823 649.460722l0 103.681384c0 11.2973-9.15859 20.466124-20.466124 20.466124s-20.466124-9.168824-20.466124-20.466124l0-103.681384c0-11.2973 9.15859-20.466124 20.466124-20.466124C538.442232 628.994598 547.600823 638.163421 547.600823 649.460722z"
          p-id="2818"
        ></path>
        <path
          d="M411.562497 428.754041c-3.786233 6.569626-10.673084 10.233062-17.733896 10.233062-3.479241 0-6.999414-0.880043-10.222829-2.742461l-89.774653-51.861158c-9.782807-5.658883-13.129019-18.173918-7.480368-27.956725 5.658883-9.79304 18.173918-13.139252 27.956725-7.490601l89.774653 51.861158C413.864936 406.456199 417.22138 418.971234 411.562497 428.754041z"
          p-id="2819"
        ></path>
        <path
          d="M767.918647 634.633015c-3.796466 6.559393-10.673084 10.233062-17.744129 10.233062-3.469008 0-6.989181-0.890276-10.212596-2.752694l-89.774653-51.861158c-9.782807-5.64865-13.139252-18.173918-7.480368-27.956725 5.64865-9.79304 18.173918-13.139252 27.956725-7.480368l89.774653 51.861158C770.221086 612.32494 773.567297 624.850208 767.918647 634.633015z"
          p-id="2820"
        ></path>
        <path
          d="M673.723312 282.70778l-51.861158 89.76442c-3.786233 6.559393-10.673084 10.233062-17.744129 10.233062-3.469008 0-6.989181-0.890276-10.212596-2.752694-9.79304-5.64865-13.139252-18.163685-7.480368-27.956725l51.861158-89.76442c5.64865-9.79304 18.163685-13.139252 27.956725-7.490601C676.025751 260.399705 679.382195 272.91474 673.723312 282.70778z"
          p-id="2821"
        ></path>
        <path
          d="M467.854571 639.053698l-51.861158 89.774653c-3.796466 6.559393-10.673084 10.233062-17.744129 10.233062-3.479241 0-6.999414-0.890276-10.222829-2.752694-9.782807-5.658883-13.139252-18.173918-7.480368-27.956725l51.861158-89.774653c5.658883-9.782807 18.173918-13.129019 27.956725-7.480368C470.15701 616.755856 473.503221 629.27089 467.854571 639.053698z"
          p-id="2822"
        ></path>
        <path
          d="M460.435601 379.911636c-3.213181 1.862417-6.733355 2.742461-10.202363 2.742461-7.081279 0-13.957897-3.673669-17.744129-10.243295l-51.809993-89.795119c-5.64865-9.79304-2.292206-22.308075 7.500834-27.956725 9.79304-5.64865 22.308075-2.292206 27.956725 7.500834l51.79976 89.795119C473.585085 361.747951 470.228641 374.262986 460.435601 379.911636z"
          p-id="2823"
        ></path>
        <path
          d="M666.089447 736.400816c-3.223415 1.852184-6.743588 2.742461-10.212596 2.742461-7.071046 0-13.957897-3.673669-17.744129-10.243295l-51.79976-89.805352c-5.64865-9.79304-2.292206-22.308075 7.500834-27.956725 9.782807-5.64865 22.297842-2.281973 27.946492 7.500834l51.809993 89.805352C679.238932 718.237131 675.882488 730.752166 666.089447 736.400816z"
          p-id="2824"
        ></path>
        <path
          d="M760.499677 384.526747l-89.795119 51.809993c-3.223415 1.852184-6.743588 2.742461-10.212596 2.742461-7.071046 0-13.957897-3.673669-17.744129-10.243295-5.64865-9.79304-2.292206-22.308075 7.500834-27.956725l89.805352-51.809993c9.782807-5.638417 22.297842-2.281973 27.946492 7.500834C773.649162 366.363062 770.292718 378.878097 760.499677 384.526747z"
          p-id="2825"
        ></path>
        <path
          d="M404.02073 590.180594l-89.805352 51.79976c-3.213181 1.862417-6.733355 2.742461-10.202363 2.742461-7.081279 0-13.957897-3.673669-17.744129-10.243295-5.64865-9.79304-2.292206-22.308075 7.500834-27.956725l89.795119-51.79976c9.79304-5.64865 22.308075-2.292206 27.956725 7.500834S413.81377 584.531943 404.02073 590.180594z"
          p-id="2826"
        ></path>
      </svg>
    </ul>
    <script src="./vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      let vm = new Vue({
        el: "#main",
        data: {
          ImgArr: [],
          isloading: false,
          num: 1,
          total: 0,
        },
        created: function () {
          let that = this;
          this.GetImgArrFn();
          var ob = new IntersectionObserver(
            function (call) {
              if (call[0].isIntersecting && !that.isloading) {
                that.GetImgArrFn();
              }
            },
            {
              threshold: 0.1,
            }
          );
          ob.observe(document.querySelector("#loading"));
        },
        computed: {
          loadingShow(){
            if(this.ImgArr.length<this.total || this.total==0){
              return true
            }else{
              return false
            }
          }
        },
        methods: {
          GetImgArrFn() {
            if (this.ImgArr.length == this.total && this.total != 0) {
              return;
            }
            this.isloading = true;
            axios({
              url:
                "https://m.maizuo.com/gateway?cityId=110100&pageNum=" +
                this.num +
                "&pageSize=10&type=1&k=484453",
              headers: {
                "X-Client-Info":
                  '{"a":"3000","ch":"1002","v":"5.2.0","e":"1653267849255181186924545","bc":"211400"}',
                "X-Host": "mall.film-ticket.film.list",
              },
            }).then((res) => {
              let {
                data: {
                  data: { films, total },
                },
              } = res;
              this.total == 0 && (this.total = total);
              this.ImgArr.length == 0
                ? (this.ImgArr = films)
                : (this.ImgArr = [...this.ImgArr, ...films]);
              this.isloading = false;
              this.num++;
            });
          },
        },
      });
    </script>
  </body>
</html>