iscroll下拉刷新和swiper轮播图插件-------知识点

版权声明：非经本人同意，请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/82593628

iscroll

iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。

一般用来做 例如：上拉加载、下拉刷新


IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。

官网：http://iscrolljs.com
github： https://github.com/cubiq/iscroll/



var myScroll = new IScroll('#wrapper');


var wrapper = document.getElementById('wrapper');
 var myScroll = new IScroll(wrapper);


var myScroll = new IScroll(‘.wrapper’);选择单个元素

当DOM准备完成后iScroll需要被初始化。最保险的方式是在window的onload事件中启动它


如果你有一个复杂的DOM结构，最好在onload事件之后适当的延迟，再去初始化iScroll。最好给浏览器100或者200毫秒的间隙再去初始化iScroll。

配置iScroll

var myScroll = new IScroll('#wrapper', { 
                    mouseWheel: true, 
                    scrollbars: true
 });

iScroll初始化时开启鼠标滚轮支持和滚动条支持。默认纵向滚动，如果需要横向 配置 scrollX：true

刷新

setTimeout(function () { myScroll.refresh(); }, 0);

这里调用refresh()使用了零秒等待，如果你需要立即刷新iScroll边界就是如此使用。当然还有其他方法可以等待页面重绘，但零超时方式相当稳定。
refresh()－当滚动区间的节点数量发生改变，必须刷新，重绘滚动条

信息

iScroll存储了很多有用的信息，您可以使用它们来增强您的应用。
myScroll.x/y，当前位置
myScroll.directionX/Y，最后的方向 (-1 down/right, 0 still, 1 up/left)
myScroll.maxScrollX
myScroll.maxScrollY当滚动到底部时的 myScroll.x/y

在不需要使用iScoll的时候调用iScroll实例的公共方法destroy()可以释放一些内存。

myScroll.destroy();

scrollTo(x,y,time)滚动位置 速度



<script>window.PointerEvent = void 0</script>

---

swiper

使用步骤：
1、首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。
2.HTML内容。
<div class="swiper-container">
 <div class="swiper-wrapper"> 
<div class="swiper-slide">Slide 1</div> 
<div class="swiper-slide">Slide 2</div> 
<div class="swiper-slide">Slide 3</div> 
</div> 
<!-- 如果需要分页器 --> 
<div class="swiper-pagination"></div>
 <!-- 如果需要导航按钮 --> 
<div class="swiper-button-prev"></div> 
<div class="swiper-button-next"></div> 
<!-- 如果需要滚动条 --> 
<div class="swiper-scrollbar"></div> 
</div> 导航等组件可以放在container之外

3.你可能想要给Swiper定义一个大小，当然不要也行

4.初始化Swiper 页面加载完之后初始化（window.onload||$(function(){})）

<script> 
var mySwiper = new Swiper ('.swiper-container', { 
direction: 'vertical', loop: true, 

// 如果需要分页器
 pagination: '.swiper-pagination', 

// 如果需要前进后退按钮 
nextButton: '.swiper-button-next', 
prevButton: '.swiper-button-prev', 

// 如果需要滚动条
 scrollbar: '.swiper-scrollbar',
 }) 
</script>

初始化：



<div class="swiper-container"> 
	<div class="swiper-wrapper"> 
		<div class="swiper-slide">slider1</div>
		 <div class="swiper-slide">slider2</div>
		 <div class="swiper-slide">slider3</div> 
	</div>
 </div>
 <script>
	 var mySwiper = new Swiper('.swiper-container', { 
		autoplay: 5000,//可选选项，自动滑动 
	})
 </script>

配置参数：



initialSlide :2 设定初始化时slide的索引

direction :’’ Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。

speed滑动速度，即slider自动滑动开始到结束的时间（单位ms）。

autoplay: 5000 自动滑动

freeMode
默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
freeModeSticky  ： true
使得freeMode也能自动贴合。

Effect滑动效果设置

var mySwiper = new Swiper('#swiper-container1',{ effect : 'fade', })
 var mySwiper2 = new Swiper('#swiper-container2',{ effect : 'cube', })
 var mySwiper3 = new Swiper('#swiper-container3',{ effect : 'coverflow', slidesPerView: 3, centeredSlides: true, })
 var mySwiper4 = new Swiper('#swiper-container4',{ effect : 'flip', })

Pagination分页器
分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外，不同Swiper的组件应该有所区分，如#pagination1，#pagination2。

<div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide">Slide 1</div>
 <div class="swiper-slide">Slide 2</div> 
<div class="swiper-slide">Slide 3</div>
</div> 
<div class="swiper-pagination"></div>
 </div> 
<script language="javascript"> 
	var mySwiper = new Swiper('.swiper-container',{ 
		pagination : '.swiper-pagination',
		 //pagination : '#swiper-pagination1',
 })
 </script>

paginationType
分页器样式类型，可选‘bullets’  圆点（默认）‘fraction’  分式 ‘progress’  进度条

paginationClickable
此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。


paginationHide
默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。

nextButton  prevButton
前进按钮的css选择器或HTML元素。后退按钮的css选择器或HTML元素。

<div class="swiper-container"> 
	<div class="swiper-wrapper">
 <div class="swiper-slide">Slide 1</div> 
<div class="swiper-slide">Slide 2</div> 
<div class="swiper-slide">Slide 3</div> 
	</div> 
<div class="swiper-button-prev"></div> 
<div class="swiper-button-next"></div> 
</div>
 <script language="javascript"> 
	var mySwiper = new Swiper('.swiper-container',{ 
prevButton:'.swiper-button-prev', 
nextButton:'.swiper-button-next', 
}) 
</script> 
<!-- 修改箭头颜色示范 --> 
<div class="swiper-button-next swiper-button-white"></div> <!-- 白色 --> 
<div class="swiper-button-next swiper-button-black"></div> <!-- 黑色 --> 

scrollbar:'.swiper-scrollbar'  Scrollbar容器的css选择器或HTML元素。
scrollbarDraggable该参数设置为true时允许拖动滚动条。


keyboardControl : true设置为true时，能使用键盘方向键控制slide滑动


loop : true设置为true 则开启loop模式。loop模式：会在wrapper前后生成若干个slides让slides看起来是衔接的，用于无限循环切换。

Swiper Animate使用方法---------此插件不适用于loop模式

1、使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。

2、初始化时隐藏元素并在需要的时刻开始动画。
var mySwiper = new Swiper ('.swiper-container', { 
	onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit 		swiperAnimateCache(swiper); //隐藏动画元素 		swiperAnimate(swiper); //初始化完成开始动画
	 }, 
	onSlideChangeEnd: function(swiper){
	 	swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	 } 
})

在需要运动的元素上面增加类名  ani   ，和其他的类似插件相同，Swiper Animate需要指定几个参数：swiper-animate-effect：切换效果，例如 fadeInUp swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5sswiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

<div class="swiper-slide">
	 <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-	duration="0.5s" swiper-animate-delay="0.3s">内容</p> 
</div>