iScroll 插件介紹
iScroll是一個高性能，資源占用少，無依賴，多平臺的javascript滾動插件。
它可以在桌面，移動設備和智能電視平臺上工作。它一直在大力優化性能和文件大小以便在新舊設備上提供最順暢的體驗。
iScroll不僅僅是 滾動。它可以處理任何需要與用戶進行移動交互的元素。在你的項目中包含僅僅4kb大小的iScroll，你的項目便擁有了滾動，縮放，平移，無限滾動，視差滾動，旋轉功能。給它一個掃帚它甚至能幫你打掃辦公室。
即使平臺本身提供的滾動已經很不錯，iScroll可以在此基礎上提供更多不可思議的功能。具體來說：
- 細粒度控制滾動位置，甚至在滾動過程中。你總是可以獲取和設置滾動器的x，y坐標。
- 動畫可以使用用戶自定義的擦出功能（反彈'bounce'，彈性'elastic'，回退'back'，...）。
- 你可以很容易的掛靠大量的自定義事件（onBeforeScrollStart, *
- 開箱即用的多平臺支持。從很老的安卓設備到最新的iPhone，從Chrome瀏覽器到IE瀏覽器。
說白了就是一個可以幫我們實現元素在PC端手機端滾動的插件 賊好用
下面會有原生JavaScript和Vue的不同例子Demo
GitHubDemo地址 https://github.com/LanHai1/iScroll
中文文檔https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/index.html
由于iScroll插件需計算元素的高度 動態添加數據后會失效 所以需要調用myScroll.refresh();方法進行刷新
如果是用Vue實現iScroll 注意: 需要把實例new iScroll寫到mounted生命周期鉤子中 需要在updated生命周期鉤子中設置iScroll刷新
外層父元素需要設置高度！
頁面結構
必須遵守這三層結構即可
<!-- 最外層盒子 和iScroll 綁定 -->
<div id="lists" ref="wrapper">
<!-- 內容盒子 -->
<ul>
<!-- 內容 -->
<li v-for="(item, index) in arrList" :key="index">{{ item }}</li>
</ul>
</div>
原生JavaScript實現代碼
<!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);
// 動態添加數據后 刷新iscroll
myScroll.refresh();
};
</script>
</body>
</html>
Vue實現代碼
<!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數據全部掛載 加載iScroll
mounted() {
this.myScroll = new IScroll(this.$refs.wrapper, {
mouseWheel: true, // 開啟鼠標滾輪支持
scrollbars: "custom" // 開啟滾動條支持
});
},
// 數據更新 重新刷新iScroll 計算高度
updated() {
this.myScroll.refresh();
}
});
</script>
</body>
</html>
gif
