iScroll 插件介紹
iScroll是一個(gè)高性能，資源占用少，無(wú)依賴，多平臺(tái)的javascript滾動(dòng)插件。
它可以在桌面，移動(dòng)設(shè)備和智能電視平臺(tái)上工作。它一直在大力優(yōu)化性能和文件大小以便在新舊設(shè)備上提供最順暢的體驗(yàn)。
iScroll不僅僅是 滾動(dòng)。它可以處理任何需要與用戶進(jìn)行移動(dòng)交互的元素。在你的項(xiàng)目中包含僅僅4kb大小的iScroll，你的項(xiàng)目便擁有了滾動(dòng)，縮放，平移，無(wú)限滾動(dòng)，視差滾動(dòng)，旋轉(zhuǎn)功能。給它一個(gè)掃帚它甚至能幫你打掃辦公室。
即使平臺(tái)本身提供的滾動(dòng)已經(jīng)很不錯(cuò)，iScroll可以在此基礎(chǔ)上提供更多不可思議的功能。具體來(lái)說(shuō)：
- 細(xì)粒度控制滾動(dòng)位置，甚至在滾動(dòng)過(guò)程中。你總是可以獲取和設(shè)置滾動(dòng)器的x，y坐標(biāo)。
- 動(dòng)畫(huà)可以使用用戶自定義的擦出功能（反彈'bounce'，彈性'elastic'，回退'back'，...）。
- 你可以很容易的掛靠大量的自定義事件（onBeforeScrollStart, *
- 開(kāi)箱即用的多平臺(tái)支持。從很老的安卓設(shè)備到最新的iPhone，從Chrome瀏覽器到IE瀏覽器。
說(shuō)白了就是一個(gè)可以幫我們實(shí)現(xiàn)元素在PC端手機(jī)端滾動(dòng)的插件 賊好用
下面會(huì)有原生JavaScript和Vue的不同例子Demo
GitHubDemo地址 https://github.com/LanHai1/iScroll
中文文檔https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/index.html
由于iScroll插件需計(jì)算元素的高度 動(dòng)態(tài)添加數(shù)據(jù)后會(huì)失效 所以需要調(diào)用myScroll.refresh();方法進(jìn)行刷新
如果是用Vue實(shí)現(xiàn)iScroll 注意: 需要把實(shí)例new iScroll寫(xiě)到mounted生命周期鉤子中 需要在updated生命周期鉤子中設(shè)置iScroll刷新
外層父元素需要設(shè)置高度！
頁(yè)面結(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實(shí)現(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">點(diǎn)擊添加一個(gè)li</button>
<div id="wrapper">
<ul>
<li>我是第1個(gè)</li>
<li>我是第2個(gè)</li>
<li>我是第3個(gè)</li>
<li>我是第4個(gè)</li>
<li>我是第5個(gè)</li>
<li>我是第6個(gè)</li>
<li>我是第7個(gè)</li>
<li>我是第8個(gè)</li>
<li>我是第9個(gè)</li>
<li>我是第10個(gè)</li>
<li>我是第11個(gè)</li>
<li>我是第12個(gè)</li>
<li>我是第13個(gè)</li>
<li>我是第14個(gè)</li>
<li>我是第15個(gè)</li>
<li>我是第16個(gè)</li>
<li>我是第17個(gè)</li>
<li>我是第18個(gè)</li>
<li>我是第19個(gè)</li>
<li>我是第20個(gè)</li>
</ul>
</div>
<script src="./lib/iscroll.js"></script>
<script>
const myScroll = new IScroll("#wrapper", {
mouseWheel: true, // 開(kāi)啟鼠標(biāo)滾輪支持
scrollbars: "custom" // 開(kāi)啟滾動(dòng)條支持
});
document.querySelector("#btn").onclick = () => {
let li = document.createElement("li");
li.innerText = "我是新增的li";
document.querySelector("#wrapper>ul").appendChild(li);
// 動(dòng)態(tài)添加數(shù)據(jù)后 刷新iscroll
myScroll.refresh();
};
</script>
</body>
</html>
Vue實(shí)現(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個(gè)li",
"我是第2個(gè)li",
"我是第3個(gè)li",
"我是第4個(gè)li",
"我是第5個(gè)li",
"我是第6個(gè)li",
"我是第7個(gè)li",
"我是第8個(gè)li",
"我是第9個(gè)li",
"我是第10個(gè)li"
],
// iscorll 實(shí)例對(duì)象
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, // 開(kāi)啟鼠標(biāo)滾輪支持
scrollbars: "custom" // 開(kāi)啟滾動(dòng)條支持
});
},
// 數(shù)據(jù)更新 重新刷新iScroll 計(jì)算高度
updated() {
this.myScroll.refresh();
}
});
</script>
</body>
</html>
