前端必会知识点之iscroll.js,打造属于你自己的滑动模块

最新推荐文章于 2024-07-29 11:53:27 发布

qq_1170407931

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量527

点赞数

文章标签： js javascript html5 css

本文链接：https://blog.csdn.net/qq_41877039/article/details/105569426

版权

如果你想让自己的一个列表有滑动效果，那你就得考虑下这个优秀的插件了----iscroll.js.

使用起来非常方便，使用时的主要要求有如下几点：

引入文件就不说了哈

1.结构上【必须步骤】：div下嵌套最简单的无序列表，并且div必须有一个关键的id，一般叫做“wrapper”，别人都这么叫，当然你也可以改的。

<div id='wrapper'>  
    <ul>
        <li>XXX </li>
        <li><a href="#">#XXX </a></li>
        <li><a href="#">#XXX </a></li>
            .......
    </ul>
 </div>

2.为该id对应的元素css中设置样式【必须步骤】：代码如下

 #wrapper {
      width:8%;
      height: 680px;
   }

这里面的width、height是我随意设的，需要注意的是，你的列表一定要位于这个宽、高组成的框，且列表的高要大于矩形框的高，否则不会起作用。如下图：

3.初始化插件：只需要这几行代码即可。

const myScroll = new IScroll("#wrapper", {
    mouseWheel: true, // 开启鼠标滚轮支持
    scrollbars: "custom" // 开启滚动条支持
});

来个完整例子供大家使用：

----------------------代码开始-----------------------

<!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>

----------------------代码结束-----------------------

如果各位小伙伴想进一步沟通，关注我的公/众/号：“软件编程网站开发”,感谢支持！

qq_1170407931

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端必会知识点之iscroll.js,打造属于你自己的滑动模块

如果你想让自己的一个列表有滑动效果，那你就得考虑下这个优秀的插件了----iscroll.js.使用起来非常方便，使用时的主要要求有如下几点：1.结构上【必须步骤】：div下嵌套最简单的无序列表，并且div必须有一个关键的id，一般叫做“wrapper”，别人都这么叫，当然你也可以改的。<divid='wrapper'> <ul> ...
复制链接

扫一扫