首页 > Web开发 > 详细

iScroll.js使用详解

时间:2019-03-11 11:11:30      阅读:138      评论:0      收藏:0      [点我收藏+]

实现移动端上下滑动效果

HTML内容如下:

<div class="sex" id="wrapper">
   <ul>
       <li data-id="0">男</li>
       <li data-id="1">女</li>
   </ul>
</div>

  CSS

 .dialog .sexChoose .sex{
    margin:1.867rem 0;
    height:1.6rem;
    overflow: hidden;
}
.dialog .sexChoose .sex ul{
    width:1.6rem;
    margin:0 auto;
}
.dialog .sexChoose .sex ul li{
    padding:0.533rem 0;
    border-top:1px solid #42C21E;
    font-size:0.427rem;
    line-height:0.453rem;
    color:#666666;
    text-align: center;
}
.dialog .sexChoose .sex ul li:last-child{
     border-bottom:1px solid #42C21E;
}

  

先引入Zepto.min.js文件 ,引入iscroll.js , JS调用如下:

document.querySelector(‘#wrapper‘).addEventListener("touchmove",function(e){
        e.preventDefault()
});
new IScroll(document.querySelector(‘#wrapper‘),{
   scrollX:false,
   scrollY:true
});

 效果如下:

技术分享图片

iScroll.js使用详解

原文:https://www.cnblogs.com/dyy-dida/p/10509079.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!