iScroll 插件介紹
iScroll是一個高性能箍铲，資源占用少雇卷，無依賴，多平臺的javascript滾動插件颠猴。
它可以在桌面关划，移動設(shè)備和智能電視平臺上工作。它一直在大力優(yōu)化性能和文件大小以便在新舊設(shè)備上提供最順暢的體驗翘瓮。
iScroll不僅僅是 滾動贮折。它可以處理任何需要與用戶進行移動交互的元素。在你的項目中包含僅僅4kb大小的iScroll资盅，你的項目便擁有了滾動调榄，縮放踊赠，平移，無限滾動每庆，視差滾動筐带，旋轉(zhuǎn)功能。給它一個掃帚它甚至能幫你打掃辦公室扣孟。
即使平臺本身提供的滾動已經(jīng)很不錯烫堤，iScroll可以在此基礎(chǔ)上提供更多不可思議的功能。具體來說：
- 細粒度控制滾動位置凤价，甚至在滾動過程中鸽斟。你總是可以獲取和設(shè)置滾動器的x，y坐標利诺。
- 動畫可以使用用戶自定義的擦出功能（反彈'bounce'富蓄，彈性'elastic'，回退'back'慢逾，...）立倍。
- 你可以很容易的掛靠大量的自定義事件（onBeforeScrollStart, *
- 開箱即用的多平臺支持。從很老的安卓設(shè)備到最新的iPhone侣滩，從Chrome瀏覽器到IE瀏覽器口注。
說白了就是一個可以幫我們實現(xiàn)元素在PC端手機端滾動的插件 賊好用
下面會有原生JavaScript和Vue的不同例子Demo
GitHubDemo地址 https://github.com/LanHai1/iScroll
中文文檔https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/index.html
由于iScroll插件需計算元素的高度 動態(tài)添加數(shù)據(jù)后會失效 所以需要調(diào)用myScroll.refresh();方法進行刷新
如果是用Vue實現(xiàn)iScroll 注意: 需要把實例new iScroll寫到mounted生命周期鉤子中 需要在updated生命周期鉤子中設(shè)置iScroll刷新
外層父元素需要設(shè)置高度！
頁面結(jié)構(gòu)
必須遵守這三層結(jié)構(gòu)即可
<!-- 最外層盒子 和iScroll 綁定 -->
<div id="lists" ref="wrapper">
<!-- 內(nèi)容盒子 -->
<ul>
<!-- 內(nèi)容 -->
<li v-for="(item, index) in arrList" :key="index">{{ item }}</li>
</ul>
</div>
原生JavaScript實現(xiàn)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#wrapper {
width: 500px;
height: 100px;
border: 1px solid #000;
margin: 100px auto;
/* overflow: hidden; */
}
ul {
padding: 0;
margin: 0;
}
li {
cursor: default;
}
</style>
</head>
<body>
<button id="btn">點擊添加一個li</button>
<div id="wrapper">
<ul>
<li>我是第1個</li>
<li>我是第2個</li>
<li>我是第3個</li>
<li>我是第4個</li>
<li>我是第5個</li>
<li>我是第6個</li>
<li>我是第7個</li>
<li>我是第8個</li>
<li>我是第9個</li>
<li>我是第10個</li>
<li>我是第11個</li>
<li>我是第12個</li>
<li>我是第13個</li>
<li>我是第14個</li>
<li>我是第15個</li>
<li>我是第16個</li>
<li>我是第17個</li>
<li>我是第18個</li>
<li>我是第19個</li>
<li>我是第20個</li>
</ul>
</div>
<script src="./lib/iscroll.js"></script>
<script>
const myScroll = new IScroll("#wrapper", {
mouseWheel: true, // 開啟鼠標滾輪支持
scrollbars: "custom" // 開啟滾動條支持
});
document.querySelector("#btn").onclick = () => {
let li = document.createElement("li");
li.innerText = "我是新增的li";
document.querySelector("#wrapper>ul").appendChild(li);
// 動態(tài)添加數(shù)據(jù)后 刷新iscroll
myScroll.refresh();
};
</script>
</body>
</html>
Vue實現(xiàn)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#lists {
width: 400px;
height: 80px;
border: 1px solid #000;
margin-top: 20px;
}
#lists > ul {
padding: 0;
margin: 0;
}
#lists>ul>li{
cursor: default;
}
</style>
</head>
<body>
<div id="app">
<input type="text" name="" id="" v-model="liStr" @keyup.enter="addList" />
<div id="lists" ref="wrapper">
<ul>
<li v-for="(item, index) in arrList" :key="index">{{ item }}</li>
</ul>
</div>
</div>
<script src="./lib/iscroll.js"></script>
<script src="./lib/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
liStr: "",
arrList: [
"我是第1個li",
"我是第2個li",
"我是第3個li",
"我是第4個li",
"我是第5個li",
"我是第6個li",
"我是第7個li",
"我是第8個li",
"我是第9個li",
"我是第10個li"
],
// iscorll 實例對象
myScroll: undefined
},
methods: {
addList() {
this.arrList.push(this.liStr);
this.liStr = "";
}
},
// data數(shù)據(jù)全部掛載 加載iScroll
mounted() {
this.myScroll = new IScroll(this.$refs.wrapper, {
mouseWheel: true, // 開啟鼠標滾輪支持
scrollbars: "custom" // 開啟滾動條支持
});
},
// 數(shù)據(jù)更新 重新刷新iScroll 計算高度
updated() {
this.myScroll.refresh();
}
});
</script>
</body>
</html>
gif
