版权声明:非经本人同意,请勿转载。 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>