黑马程序员技术交流社区

标题: 【南京校区】四款移动开发中的插件的用法 [打印本页]

---

作者: 大蓝鲸小蟀锅    时间: 2018-3-8 20:53
标题: 【南京校区】四款移动开发中的插件的用法

fastclick.js

可以解决移动端的点击事件的
点透问题,并且同时适用于PC端和移动端.
使用方法：

1. 在页面中引入fastclick.js

2. 将FastClick绑定给document.body,这样页面中的所有元素就都可以使用fastclick封装的click方法

未使用jquery的情况下

1   2   3   4   5

if ('addEventListener' in document) {                  document.addEventListener('DOMContentLoaded', function() {                                  FastClick.attach(document.body);                  }, false);   }

如果使用了jquery

1   2   3

$(function() {                  FastClick.attach(document.body);   });

3.为DOM元素绑定click事件即可

1   2   3

example.addEventListener("click",function(){   ........   })

4.这样PC端和移动端就都可以触发点击事件,并且不会产生点透

iScroll

可以实现移动端滚动效果

使用方法

1.页面结构

< div id=”wrapper”>
    < ul>
        < li>…< /li>
        < li>…< /li>
        …
    < /ul>
< /div>

2.初始化

var myScroll = new IScroll(‘#wrapper’);
或
var wrapper = document.getElementById(‘wrapper’);
var myScroll = new IScroll(wrapper);
或
var myScroll = new IScroll(‘.wrapper’);

3.可以为其传入参数

var myScroll = new IScroll(‘.wrapper’,{mouseWheel: true,scrollbars: true});

开始鼠标滚轮滚动和滚动条,因为滚动条是默认相对body 定位的,所以如果想让滚动条出现在父元素上,则要给父元素设置position:relative

swipe

1.页面结构

1   2   3   4   5   6   7

<div .id='slider' class='swipe'>     <div  class='swipe-wrap'>        <div></div>        <div></div>        <div></div>     </div>   </div>

2.css样式

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

3.初始化

    window.mySwipe = Swipe(document.getElementById(‘slider’));

4.一些参数

  window.mySwipe = newSwipe(document.getElementById(‘slider’), {
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

5.API

prev() slide to prev
next() slide to next
getPos() returns current slide index position
getNumSlides() returns the total amount of slides
slide(index, duration) slide to set index position (duration: speed oftransition in milliseconds)

---

作者: peterhe    时间: 2018-3-9 13:02
感谢楼主分享

---

作者: 飞翔的刺头    时间: 2018-3-9 13:27
干货~~感谢分享！！

---

作者: @狂奔    时间: 2018-3-9 13:32
菊姐，威武6666666

---

作者: 小学生不上学    时间: 2018-3-9 13:37
厉害了我的菊姐

---

作者: zhangsiyuan    时间: 2018-3-9 14:47
菊姐，六六六六六

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2