欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VUE中鼠標(biāo)滾輪使div左右滾動(dòng)的方法詳解

 更新時(shí)間:2020年12月14日 10:24:55   作者:金小熊丿  
這篇文章主要給大家介紹了關(guān)于VUE中鼠標(biāo)滾輪使div左右滾動(dòng)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

技術(shù)點(diǎn): addEventListener/attachEvent(傳遞參數(shù))

功能描述: 鼠標(biāo)停在div中,若div有x軸滾動(dòng)條,則鼠標(biāo)滾輪控制x軸滾動(dòng)條橫向滾動(dòng)

一、單個(gè)實(shí)現(xiàn)

1.定義變量

data () {
	return {
		domObj: null
	}
}

2.編寫(xiě)方法

綁定事件

scrollFunction () {
 this.domObj = document.getElementById('ceshi') // 通過(guò)id獲取要設(shè)置的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
 }

當(dāng)鼠標(biāo)放在id為‘ceshi'的div上時(shí),鼠標(biāo)滾輪滾動(dòng)觸發(fā)的事件

mouseScroll(event) { // google 瀏覽器下
 let detail = event.wheelDelta || event.detail
 let moveForwardStep = -1
 let moveBackStep = 1
 let step = 0
 step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
 event.preventDefault() // 阻止瀏覽器默認(rèn)事件
 this.domObj.scrollLeft = this.domObj.scrollLeft + step
 }

3.觸發(fā)

可以直接在mounted中觸發(fā)

this.scrollFunction()

注意1: 如果是內(nèi)容v-for循環(huán)出來(lái)的div,內(nèi)容從后端獲取,此時(shí)就不能在mounted中觸發(fā),因?yàn)閙ounted是掛載完成,這時(shí)請(qǐng)求還沒(méi)開(kāi)始,也就是說(shuō)這時(shí)div還沒(méi)x軸滾動(dòng)條,所以應(yīng)該在請(qǐng)求完成后觸發(fā)scrollFunction()

注意2: 若在請(qǐng)求結(jié)束得到后端返回內(nèi)容時(shí)觸發(fā),直接觸發(fā)你會(huì)發(fā)現(xiàn)不起作用。個(gè)人理解:因?yàn)檎?qǐng)求到數(shù)據(jù),vue雙向綁定監(jiān)聽(tīng)到數(shù)據(jù)改變,觸發(fā)頁(yè)面更新,瀏覽器重繪或回流需要時(shí)間(如若有誤,還望指正),所以可以用setTimeout

setTimeout(function () {
   this.scrollFunction()
   }, 100) // 0.1S后執(zhí)行綁定方法

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)
}

二、多個(gè)實(shí)現(xiàn)

關(guān)鍵點(diǎn): addEventListener第二個(gè)參數(shù)Function傳參

1.描述

如果一個(gè)頁(yè)面中有多個(gè)div需要實(shí)現(xiàn)這個(gè)效果,按照上面的方法CV是當(dāng)然可以的,不過(guò)就顯得代碼沒(méi)有深度,所以用到了addEventListener傳參。

2.addEventListener(參數(shù))

綁定事件修改如下:

參數(shù):obj:需要橫向滾動(dòng)的div存放位置

id:需要橫向滾動(dòng)的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有了個(gè)參數(shù)obj,但是addEventListener第二個(gè)參數(shù)接收的是一個(gè)function。在觸發(fā)執(zhí)行時(shí),如果想將參數(shù)傳遞進(jìn)去的話,就得使用閉包的形式。具體修改如下:

mouserScroll (obj) {
  return function () {
  let e = window.event || document.all ? window.event : arguments[0] ? arguments[0] : event
  let detail, moveForwardStep, moveBackStep
  let step = 0
  if (e.wheelDelta) { // google 下滑負(fù)數(shù): -120
   detail = e.wheelDelta
   moveForwardStep = -1
   moveBackStep = 1
  } else if (e.detail) { // firefox 下滑正數(shù):3
   detail = event.detail
   moveForwardStep = 1
   moveBackStep = -1
  }
  step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
  e.preventDefault()
  obj.scrollLeft = obj.scrollLeft + step
  }
 }

注意:

1.因?yàn)橛辛藗鲄?,所以event直接放在mouserScroll(obj, event)這樣是取不到event的,所以得用JS取event的方式寫(xiě):

let e = window.event || document.all ? window.event : arguments[0] ? arguments[0] : event

(document.add ? window.event : arguments[0] ? arguments[0] : event) 是FireFox里面取event的寫(xiě)法

2.觸發(fā)

因?yàn)橛辛藚?shù),所以觸發(fā)的寫(xiě)法如下:

this.scrollFunction(this.domObj1, 'ceshi1') 
this.scrollFunction(this.domObj2, 'ceshi2')

其中,this.domObj1和this,domObj2需要先在data中定義,第二個(gè)參數(shù)是需要橫向滾動(dòng)的div的id值。

3.卸載

最后在beforeDistroy中卸載就好了,卸載代碼同上。

總結(jié)

到此這篇關(guān)于VUE中鼠標(biāo)滾輪使div左右滾動(dòng)的文章就介紹到這了,更多相關(guān)VUE鼠標(biāo)滾輪使div左右滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue.js iview打包上線后字體圖標(biāo)不顯示解決辦法

    vue.js iview打包上線后字體圖標(biāo)不顯示解決辦法

    這篇文章主要介紹了vue.js iview打包上線后字體圖標(biāo)不顯示解決辦法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-01-01
  • vue項(xiàng)目配置國(guó)際化$t('')的介紹和用法示例

    vue項(xiàng)目配置國(guó)際化$t('')的介紹和用法示例

    這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目配置國(guó)際化?$t('')的介紹和用法的相關(guān)資料,多語(yǔ)言和國(guó)際化現(xiàn)在已經(jīng)成為一個(gè)網(wǎng)站或應(yīng)用的必要功能之一,Vue作為一款流行的前端框架,在這方面也有著靈活的解決方案,需要的朋友可以參考下
    2023-09-09
  • 基于Vue實(shí)現(xiàn)的多條件篩選功能的詳解(類(lèi)似京東和淘寶功能)

    基于Vue實(shí)現(xiàn)的多條件篩選功能的詳解(類(lèi)似京東和淘寶功能)

    這篇文章主要介紹了Vue多條件篩選功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • 利用Vue-cli搭建Vue項(xiàng)目框架的教程詳解

    利用Vue-cli搭建Vue項(xiàng)目框架的教程詳解

    這篇文章主要為大家詳細(xì)介紹了利用Vue-cli搭建Vue項(xiàng)目框架的相關(guān)資料,對(duì)大家深入了解Vue有一定的幫助,感興趣的小伙伴可以了解一下
    2023-02-02
  • 基于vue監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)錨點(diǎn)鏈接平滑滾動(dòng)的方法

    基于vue監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)錨點(diǎn)鏈接平滑滾動(dòng)的方法

    本篇文章主要介紹了基于vue監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)錨點(diǎn)鏈接平滑滾動(dòng)的方法,非常具有實(shí)用價(jià)值,有興趣的可以了解一下
    2018-01-01
  • vue2如何使用vue-i18n搭建多語(yǔ)言切換環(huán)境

    vue2如何使用vue-i18n搭建多語(yǔ)言切換環(huán)境

    這篇文章主要介紹了vue2-使用vue-i18n搭建多語(yǔ)言切換環(huán)境的相關(guān)知識(shí),在data(){}中獲取的變量存在更新this.$i18n.locale的值時(shí)無(wú)法自動(dòng)切換的問(wèn)題,需要刷新頁(yè)面才能切換語(yǔ)言,感興趣的朋友一起看看吧
    2023-12-12
  • vue使用原生js創(chuàng)建元素樣式不生效問(wèn)題及解決

    vue使用原生js創(chuàng)建元素樣式不生效問(wèn)題及解決

    這篇文章主要介紹了vue使用原生js創(chuàng)建元素樣式不生效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vue自定義指令之面板拖拽的實(shí)現(xiàn)

    vue自定義指令之面板拖拽的實(shí)現(xiàn)

    這篇文章主要介紹了vue自定義指令之面板拖拽的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • 使用vue-print-nb打印el-table問(wèn)題總結(jié)

    使用vue-print-nb打印el-table問(wèn)題總結(jié)

    這篇文章主要介紹了使用vue-print-nb打印el-table問(wèn)題總結(jié),通過(guò)實(shí)例代碼介紹了vue-print-nb 打印功能,本文結(jié)合實(shí)例代碼講解的非常詳細(xì),感興趣的朋友一起看看吧
    2024-01-01
  • 基于vue中對(duì)鼠標(biāo)劃過(guò)事件的處理方式詳解

    基于vue中對(duì)鼠標(biāo)劃過(guò)事件的處理方式詳解

    今天小編就為大家分享一篇基于vue中對(duì)鼠標(biāo)劃過(guò)事件的處理方式詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08

最新評(píng)論