vue中新增滾動事件設定的方法詳解,事件,滑鼠,滾輪,控制代碼,階段
vue中新增滾動事件設定的方法詳解
一、問題發現
在看vue的事件文件中,測試scroll事件發現如下是行不通的,觸發不了scroll事件, 經過一番搜尋未找到原因,不過找到了另外兩種在vue中設定滾動事件。
二、原因分析
暫無三、解決辦法
1.直接利用mousewheel事件替代scroll事件
mousewheel滑鼠滾輪,顯而易見動動滑鼠滾輪就能觸發事件,但是用游標拖拽滾動條就不能觸發事件。
2.類似於原生js新增滾動事件
new vue({
data:{
scroll:'0'
methods:{
// showout: function ( ) {
// console.log('hhhhh')
scrollds : function ( ) {
// 頁面指定了dtd，即指定了doctype時，使用document.documentelement。
// 頁面沒有dtd，即沒指定doctype時，使用document.body。
this.scroll = document.documentelement.scrolltop
console.log(this.scroll)
// created:在模板渲染成html前呼叫，即通常初始化某些屬性值，然後再渲染成檢視。
// mounted:在模板渲染成html後呼叫，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。
mounted(){
// addeventlistener 方法用於向指定元素新增事件
// 引數1：必選 事件名 例如： click , scroll , mouseenter
// 引數2：必選 指定事件觸發時的執行函式
// 引數3：可選 布林值 指定事件是否咋在捕獲或冒泡階段執行
// true - 事件在控制代碼捕獲階段執行
// false - 事件控制代碼冒泡階段執行
window.addeventlistener('scroll', this.scrollds , true)
這種方法既能用滾輪來觸發事件也能用游標拖動滾動條觸發事件。
總結
vue 設定滾動條 ant design vue
ant design vue元件中沒有關於滾動條的設定 內容如下 安裝模組 npm install vuescroll main.js中引入 import vuescroll from vuescroll 引入vuescroll import vuescroll dist vuescroll.css...
VUE 滾動公告
vue 實現滾動公告思路 1.固定顯示區域的高度，超出隱藏，2.絕對定位，使用transition過渡效果改變top值設定為顯示區域高度的倍數，3.必不可少的定時器setinterval設定每條資訊顯示多長時間 4.v for迴圈出要顯示的資訊 5.v bind class繫結過渡效果的類名，當最後...
vue之理由懶載入
最近在看別人的專案的時候發現路由的另一種寫法，以前自己寫component的時候都是直接在後面寫上元件名，後來查資料發現這是路由懶載入的寫法。什麼是路由懶載入，為什麼要用路由懶載入 路由懶載入就是當使用者需要的時候才載入相關元件，不需要的時候不會載入。像vue這種單頁面應用，如果沒有應用懶載入，運用...