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)