前言
技术点： addEventListener/attachEvent(传递参数)
功能描述： 鼠标停在div中，若div有x轴滚动条，则鼠标滚轮控制x轴滚动条横向滚动
一、单个实现
1.定义变量
data () {
return {
domObj: null
}
}
2.编写方法
绑定事件
scrollFunction () {
this.domObj = document.getElementById('ceshi') // 通过id获取要设置的div
if (this.domObj.attachEvent) { // IE
this.domObj.attachEvent('onmousewheel', this.mouseScroll)
} else if (this.domObj.addEventListener) {
this.domObj.addEventListener('DOMMouseScroll', this.mouseScroll, false)
}
this.domObj.onmousewheel = this.domObj.onmousewheel = this.mouseScroll
}
当鼠标放在id为‘ceshi'的div上时，鼠标滚轮滚动触发的事件
mouseScroll(event) { // google 浏览器下
let detail = event.wheelDelta || event.detail
let moveForwardStep = -1
let moveBackStep = 1
let step = 0
step = detail > 0 "htmlcode">
this.scrollFunction()
注意1： 如果是内容v-for循环出来的div，内容从后端获取，此时就不能在mounted中触发，因为mounted是挂载完成，这时请求还没开始，也就是说这时div还没x轴滚动条，所以应该在请求完成后触发scrollFunction()
注意2： 若在请求结束得到后端返回内容时触发，直接触发你会发现不起作用。个人理解：因为请求到数据，vue双向绑定监听到数据改变，触发页面更新，浏览器重绘或回流需要时间（如若有误，还望指正），所以可以用setTimeout
setTimeout(function () {
this.scrollFunction()
}, 100) // 0.1S后执行绑定方法
4.卸载
在beforeDistroy中卸载
if (!this.domObj) return
if (this.domObj.attachEvent) {
this.domObj.detachEvent('onmousewheel', this.mouseScroll)
}
if (this.domObj.addEventListener) {
this.domObj.removeEventListener('DOMMouseScroll', this.mouseScroll, false)
}
二、多个实现
关键点： addEventListener第二个参数Function传参
1.描述
如果一个页面中有多个div需要实现这个效果，按照上面的方法CV是当然可以的，不过就显得代码没有深度，所以用到了addEventListener传参。
2.addEventListener（参数）
绑定事件修改如下：
参数：obj：需要横向滚动的div存放位置
id：需要横向滚动的div的id
scrollFunction (obj, id) {
obj = document.getElementById(id)
if (obj.attachEvent) {
obj.attachEvent('onmousewheel', this.mouseScroll(obj))
} else if (obj.addEventListener) {
obj.addEventListener('DOMMouseScroll', this.mouseScroll(obj), false)
}
obj.onmousewheel = obj.onmousewheel = this.mouseScroll(obj)
}
既然mouseScroll有了个参数obj，但是addEventListener第二个参数接收的是一个function。在触发执行时，如果想将参数传递进去的话，就得使用闭包的形式。具体修改如下：
mouserScroll (obj) {
return function () {
let e = window.event || document.all "color: #800000">注意：
1.因为有了传参，所以event直接放在mouserScroll(obj, event)这样是取不到event的，所以得用JS取event的方式写：
let e = window.event || document.all "htmlcode">
this.scrollFunction(this.domObj1, 'ceshi1')
this.scrollFunction(this.domObj2, 'ceshi2')
其中，this.domObj1和this,domObj2需要先在data中定义，第二个参数是需要横向滚动的div的id值。
3.卸载
最后在beforeDistroy中卸载就好了，卸载代码同上。
总结
富贵资源网 Design By www.hznty.com
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。