日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
使用Vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的鼠標(biāo)拖拽滾動(dòng)效果插件

 [[356473]]

十年的彭陽(yáng)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整彭陽(yáng)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“彭陽(yáng)網(wǎng)站設(shè)計(jì)”,“彭陽(yáng)網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

演示事例

http://www.longstudy.club/vue-drag-scroll/index.html

最近在做一個(gè)新的項(xiàng)目，有個(gè)需要是這樣的：

 

簡(jiǎn)單描述一下，就是鼠標(biāo)拖動(dòng)頁(yè)面，整個(gè)頁(yè)面會(huì)隨著的鼠標(biāo)的拖拽而移動(dòng)，如果頁(yè)面有內(nèi)容，里面的內(nèi)容也需要跟著拖動(dòng)的外層整體移到。

一開(kāi)始沒(méi)啥思路，所以就發(fā)了個(gè)朋友圈，得到的答案挺多的，主要還是用拖拽之類(lèi)的，但這個(gè)拖拽只是單個(gè)元素的拖動(dòng)，我想要的整個(gè)視圖的拖動(dòng)。

這里線索又?jǐn)嗔恕?/p>

于是又回到飛書(shū)有類(lèi)似功能的頁(yè)面，然后仔細(xì)檢查一下它頁(yè)面的 DOM 結(jié)構(gòu)，如下所示：

 

發(fā)現(xiàn)有這一層，它把頁(yè)面設(shè)置的很寬，很高，為了隱藏滾動(dòng)條，所以設(shè)置overflow: hidden;，看了這一設(shè)置，突然靈光一現(xiàn)，難道它是用拖拽來(lái)觸發(fā)滾動(dòng)條的滾動(dòng)，在細(xì)想，哇靠，這思路可行的，NB。

準(zhǔn)備上手試試

創(chuàng)建一個(gè) vue 項(xiàng)目，這個(gè)就不細(xì)說(shuō)的，我已經(jīng)把原碼發(fā)布到 github 上了，有興趣自己看看：

https://github.com/qq449245884/vue-drag-scroll

首先給外層加個(gè)大大的寬和高：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   // 這里省略一些不太重要的代碼 
    3.
 
  •  
  •  

    • 這里設(shè)置了一個(gè)計(jì)算屬性 zoomStye，主要使用就是給外層加一個(gè)在的寬，和高，這里我還設(shè)置了一個(gè)縮放比較，為了是能放大縮小頁(yè)面，下面講。運(yùn)行效果：

     

    接著，我們需要監(jiān)聽(tīng)鼠標(biāo)的拖拽來(lái)觸發(fā)滾動(dòng)條效果，因?yàn)樾枰獙?duì) dom 的操作，所以這里把拖拽處理邏輯用 vue 指令封裝起來(lái)，這樣后面有需要，只要使用該指令即可。

    注意：在 vue 中如果需要對(duì) dom 進(jìn)行多次操作，最好是把它封裝在指令中。

    指令代碼如下：

     
 
 
 
      
  
  
  
  
    1. import Vue from 'vue' 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3. Vue.directive('dragscroll', function (el) { 
      4. 
  
  
  
  
    4.   el.onmousedown = function (ev) { 
      5. 
  
  
  
  
    5.     console.log(el) 
      6. 
  
  
  
  
    6.     const disX = ev.clientX 
      7. 
  
  
  
  
    7.     const disY = ev.clientY 
      8. 
  
  
  
  
    8.     const originalScrollLeft = el.scrollLeft 
      9. 
  
  
  
  
    9.     const originalScrollTop = el.scrollTop 
      10. 
  
  
  
  
    10.     const originalScrollBehavior = el.style['scroll-behavior'] 
      11. 
  
  
  
  
    11.     const originalPointerEvents = el.style['pointer-events'] 
      12. 
  
  
  
  
    12.     // auto: 默認(rèn)值，表示滾動(dòng)框立即滾動(dòng)到指定位置。 
      13. 
  
  
  
  
    13.     el.style['scroll-behavior'] = 'auto' 
      14. 
  
  
  
  
    14.     el.style['cursor'] = 'grabbing' 
      15. 
  
  
  
  
    15.     // 鼠標(biāo)移動(dòng)事件是監(jiān)聽(tīng)的整個(gè)document，這樣可以使鼠標(biāo)能夠在元素外部移動(dòng)的時(shí)候也能實(shí)現(xiàn)拖動(dòng) 
      16. 
  
  
  
  
    16.     document.onmousemove = function (ev) { 
      17. 
  
  
  
  
    17.       ev.preventDefault() 
      18. 
  
  
  
  
    18.       // 計(jì)算拖拽的偏移距離 
      19. 
  
  
  
  
    19.       const distanceX = ev.clientX - disX 
      20. 
  
  
  
  
    20.       const distanceY = ev.clientY - disY 
      21. 
  
  
  
  
    21.  
      22. 
  
  
  
  
    22.       el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY) 
      23. 
  
  
  
  
    23.       console.log(originalScrollLeft - distanceX, originalScrollTop - distanceY) 
      24. 
  
  
  
  
    24.       // 由于我們的圖片本身有點(diǎn)擊效果，所以需要在鼠標(biāo)拖動(dòng)的時(shí)候?qū)Ⅻc(diǎn)擊事件屏蔽掉 
      25. 
  
  
  
  
    25.       el.style['pointer-events'] = 'none' 
      26. 
  
  
  
  
    26.       document.body.style['cursor'] = 'grabbing' 
      27. 
  
  
  
  
    27.     } 
      28. 
  
  
  
  
    28.     document.onmouseup = function () { 
      29. 
  
  
  
  
    29.       document.onmousemove = null 
      30. 
  
  
  
  
    30.       document.onmouseup = null 
      31. 
  
  
  
  
    31.       el.style['scroll-behavior'] = originalScrollBehavior 
      32. 
  
  
  
  
    32.       el.style['pointer-events'] = originalPointerEvents 
      33. 
  
  
  
  
    33.       el.style['cursor'] = 'grab' 
      34. 
  
  
  
  
    34.     } 
      35. 
  
  
  
  
    35.   } 
      36. 
  
  
  
  
    36. }) 
      37.

    這里的主要思路就是利用 el.scrollTo 來(lái)觸發(fā)滾動(dòng)條的移到。

    有了 dragscroll 指令，我們來(lái)使用一下，首先我們需要在增加一層外層：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3.     // 這里省略一些不太重要的代碼 
      4. 
  
  
  
  
    4.   
     
  •  
  •  
  •  
  • .vue-drag-scroll-out-wrapper{ 
  •     overflow-x: hidden; 
  •     width: 100%; 
  •     height: 100%; 
  •     cursor: grab; 
  •     position: absolute; 
  •     top:0; 
  •     left: 0; 
  •     &::-webkit-scrollbar { width: 0 !important } // 隱藏垂直方向的滾動(dòng)條 
  • } 
  •  

    • // 這里省略一些不太重要的代碼 這里需要注意的在 .vue-drag-scroll-out-wrapper 要設(shè)置 overflow 值，否則無(wú)法滾動(dòng)(測(cè)試出來(lái)的)。

    這樣拖拽效果就出來(lái)啦：

     

    增加縮放

    這里，我們?cè)黾右粋€(gè)視圖的放大和縮小，所以增加兩個(gè)按鈕：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.    
      3. 
  
  
  
  
    3.   
  
  
  
  
    4.     :class="{'disabled': scale === 25}" style="font-size:22px" 
      5. 
  
  
  
  
    5.     @click="handleReduce" 
      6. 
  
  
  
  
    6.   /> 
      7. 
  
  
  
  
    7.   
  
  
  
  
    8.     :class="{'disabled': scale === 100}" 
      9. 
  
  
  
  
    9.     @click="handleEnlarge"   
      10. 
  
  
  
  
    10.   /> 
      11. 
  
  
  
  
    11.   {{scale}}%
     
  •   
    •  
  •  

    效果：

     

    這里的放大和縮小的邏輯就是通過(guò)我們?cè)黾訙p少 scale 來(lái)實(shí)現(xiàn)

     
 
 
 
      
  
  
  
  
    1. handleReduce () { 
      2. 
  
  
  
  
    2.   if (this.scale === 25) return 
      3. 
  
  
  
  
    3.   this.scale -= 25 
      4. 
  
  
  
  
    4. }, 
      5. 
  
  
  
  
    5. handleEnlarge () { 
      6. 
  
  
  
  
    6.   if (this.scale === 100) return 
      7. 
  
  
  
  
    7.   this.scale += 25 
      8. 
  
  
  
  
    8. } 
      9.

    縮放比例的關(guān)系就是開(kāi)關(guān)給出的代碼：

     
 
 
 
      
  
  
  
  
    1. const INIT_WIDTH = 2208 
      2. 
  
  
  
  
    2. const INIT_HEIGHT = 1206 
      3. 
  
  
  
  
    3. const width = INIT_WIDTH * (1 + (100 - this.scale)/100) 
      4. 
  
  
  
  
    4. const height = INIT_HEIGHT * (1 + (100 - this.scale)/100) 
      5.

    這個(gè)比例是我自己定的，比如現(xiàn)在減少到 75% ，那么最外層的高和寬就要對(duì)應(yīng)的增加原來(lái)的 25%，因?yàn)榭s放就是視野上的縮小，對(duì)應(yīng)的距離就是拉寬。

    最后就是使用 CSS 的 transform 來(lái)做縮放：

     
 
 
 
      
  
  
  
  
    1. transform: `scale(${this.scale/100})` 
      2.

    最終的效果：

    本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。


    分享名稱(chēng)：使用Vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的鼠標(biāo)拖拽滾動(dòng)效果插件
    路徑分享：http://m.5511xx.com/article/djioidc.html