vue之滚动监听

屁话不多，先看效果。

上图是实现滚动右侧时，左侧图标类型也随之滚动。另外，当点击左侧图表类型时，右侧就会跳转到点击的类型。

实现监听

在新建好的vue中安装Element-UI、jQuery资源包。
先是基本页面布局，可以使用Element-UI中的布局组件更加快捷的实现。
这里需要注意的是图标的数据格式：

 iconTypes: [
        {
          name: "类型一",
          icons: [
            {
              imgName: "1",
              name: "车车"
            },
            {
              imgName: "1.3",
              name: "车车"
            },
            {
              imgName: "1.5",
              name: "车车"
            }
          ]
        }   //此处省略多个类型下的图标数据
    ]

完成基本布局后，右侧加上id="scrollBox"，方便点击时获取，在列表的li标签内加上触发的方法。

    <ul class="type_ul">
          <li id="iconType" class="icon_li">图表类型</li>
          <li
            class="icon_li"
            v-for="(item,index) in types"
            :class="index==activeMenu?'active':''"
            @click="jump(index)"    //通过点击实现右侧div滚动
            :key="index"
          >
            <a class="type">{{item.name}}</a>
            <span class="num">{{item.num}}</span>
          </li>
    </ul>

核心功能方法实现：

listener() {    //监听页面滚动，加载时调用
      this.scrollBox = document.getElementById("scrollBox");
      const topArr = [];
      const jump = jQuery(".section");
      let top = 0;
      for (let i = 0; i < jump.length; i++) {
        topArr.push(jump.eq(i).position().top + top);
        top += 61;
      }
      let that = this;
      // 监听dom元素的scroll事件
      this.scrollBox.addEventListener(
        "scroll",
        () => {
          const current_offset_top = that.scrollBox.scrollTop;
          for (let i = 0; i < topArr.length; i++) {
            if (current_offset_top <= topArr[i]) {
              // 根据滚动距离判断应该滚动到第几个导航的位置
              that.activeMenu = i;
              break;
            }
          }
        },
        false
      );
    },
    jump(index) {   //点击类型，右侧滚动到相应位置
      this.activeMenu = index; // 当前导航
      const jump = jQuery(".section").eq(index);
      const scrollTop = jump.position().top + this.scrollBox.scrollTop - 60; // 获取需要滚动的距离
      // console.log("滚动的距离", this.scrollBox.scrollTop, index, scrollTop);
      // Chrome
      this.scrollBox.scrollTo({
        top: scrollTop,
        behavior: "smooth" // 平滑滚动
      });
    },

图标的下载

大家应该也遇到过和我一样的问题，下载文件时，直接点击浏览器就可以直接下载，只需要一个a标签就能够搞定。但是当遇到图片时，点击浏览器并不会直接下载。这是因为在点击文件时，文件地址浏览器不能够识别，所以会自动下载，但是图片就不同了。
想要下载图片，就需要使用canvas。

//点击图片a标签下载时，触发的方法
imgDownload(item) {
      let browserIsIe = this.browserIsIe();
      console.log(browserIsIe);
      if (!browserIsIe) {
        let filetype = "png";
        let canvas = document.createElement("canvas");
        let img = document.createElement("img");
        img.onload = function() {
          canvas.width = img.width;
          canvas.height = img.height;
          let context = canvas.getContext("2d");
          context.drawImage(img, 0, 0, img.width, img.height);
          canvas.toBlob(blob => {
            let a = document.createElement("a");
            a.href = window.URL.createObjectURL(blob);
            a.download = item.name;
            a.click();
          }, `image/${filetype}`);
        };
        img.setAttribute("crossOrigin", "Anonymous");
        img.src = "assets/imgs/" + item.imgName + ".svg";
        // img.src = "http://" + item.imgName;
      } else {
        window.location.href = "assets/imgs/" + item.imgName;
      }
    },
    //判断是否为Trident内核浏览器(IE等)函数
    browserIsIe() {
      if (!!window.ActiveXObject || "ActiveXObject" in window) {
        return true;
      } else {
        return false;
      }
    }

如果看不懂的，可以点击GitHub ^-^ !