vue iscroll5 下拉刷新

1. 引用js

如果需要刷新的頁面太多可以在main.js中配置,否則就在需要的頁面中引用即可。

誤區:由於vue引用文件的特殊性,不能直接import原生的js文件,否則會報錯該js文件沒有export IScroll。

正確做法:$npm i iscroll --save-dev

                  import IScroll from 'iscroll/build/iscroll-probe.js' (需要這個版本)

2. 使用

正常的使用方法可以參照iscroll給出的文檔。不會使用時,可以先參看demo中的例子。以下給出了一些我遇到的問題:

一:頁面會報錯,原因是找不到頁面元素或頁面無法拉動

主要原因:數據請求是異步的,在數據加載之前初始化iscroll導致iscroll無法獲取內容的高度,從而出現了無法拉動的情況。

解決辦法:將 iscroll 的初始化放在數據請求中

其他原因:iscroll 樣式有誤;數據不夠多,不用拉動

二:scroll.on 的幾個自定義事件,如:myScroll.on('scroll', this.updatePosition()); ‘scroll’ ‘scrollEnd’ 事件定義方法有誤,不好調用method中的方法,要寫成匿名函數。

正確做法:事件中的方法定義爲匿名函數。如果要調用method中方法時用_this.function來調用。

this.myScroll.on('scroll', function () {

console.log(this.y >> 0) // 獲取滑豎直方向滑動數值

_this.updatePosition('滑動')

})

三:scroll中<a>不能跳轉

原因:被禁止了瀏覽器的默認事件。

解決:初始化中加上 {click: true, taps: true}

四:下拉刷新時,頁面重新定位到頂部

解決辦法: myScroll.scrollTo(0, 0, 1)  // 回到滾動條頂部

setTimeout(function () {

_this.myScroll.refresh() // 刷新iscroll

}, 0)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章