屁话不多，先看效果。
上图是实现滚动右侧时，左侧图标类型也随之滚动。另外，当点击左侧图表类型时，右侧就会跳转到点击的类型。
实现监听
在新建好的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 ^-^ !
作者：ClyingDeng
链接：https://juejin.cn/post/6844904202703994893
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
