iScroll 滚动插件(必学必看必爽!!!!)
2019-07-04 本文已影响18人
蓝海00
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刷新
外层父元素需要设置高度！
原生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>
