頁面滑動到底部觸發內容載入(參考**)
原理:首先要先判斷頁面怎麼樣才是滾動到底部,也就是scrolltop+window的height是否大於document的height
if($(window).scrolltop()+$(window).height()>=$(document).height())
然後在window物件上繫結scroll事件
$(window).on("scroll", function())
接下來我在vue例項中傳送請求的methods中加入了以上**。
但是他並不工作。好吧,我來找找原因。
經過思考發現雖然我給window繫結了呼叫vue內請求資料函式的事件,但window貌似並不能呼叫vue例項內的方法。
經過試驗,發現是scroll事件只能在window上監聽。這就難倒我了?難道要我用ajax來請求?我的頁面結構可都是vue請求來的!那豈不是得重寫!
再思考。
好吧!我可以在vue例項內加乙個隱藏的div,給他設定乙個click事件。然後在第一次請求列表的時候就給我window繫結乙個觸底事件,觸底就用trigger觸發div的click事件
自己的實際案例:var data =
data: ,
created: function(),
methods: ).then(function (res) )
$(window).on("scroll", function ()
})// }
},clicknextpage: function () ).then(function (res)
})},
}})
html:別忘記
js內容
import axios from "axios";
export default ,
resultlist: null
created: function()
})
this.getlist()
methods: ).then(res => ).then(res => { //介面返回資料
console.log('資料',res)
if (this.resultlist){
var curlist = res.data.data.custommenu;
this.resultlist = this.resultlist.concat(curlist);
this.data.page++;
console.log('pages',this.data.page)
好了 經過測試完美收官!!!
VUE 實現路由懶載入
安裝外掛程式 npm i babel plugin syntax dynamic import 在babel.config.js檔案中配置 plugins component 實現路由懶載入外掛程式 babel plugin syntax dynamic import 將路由改為按需載入的形式 原來...
vue實現路由懶載入
一.意義 為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件 和 es中的import 例子 未用懶載入,vue中路由 如下import vue fro...
vue 實現頁面 懶載入
1.匯入對應頁面檔案 2.填寫路由配置 1.不需要匯入對應頁面檔案,如果需要懶載入,就不能匯入,否則懶載入會無效,會變成常規載入方式。2.直接填寫路由配置即可!瀏覽器檢視效果 這裡的 test.js 名字 是剛剛在上面綠色註解裡面填的內容 自己隨意取名即可。當點選該頁面後才會進行載入,而不會在第一次...