实现移动端上下滑动效果
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
- });
效果如下:
来源: http://www.bubuko.com/infodetail-2983581.html