为什么用sicroll，它与swiper实现嵌套滚动和其它滚动插件有什么区别

来源：蜘蛛抓取(WebSpider) 时间：2016-12-31 16:34 标签： swiper 页面内滚动条
自适应滑动插件swiper.js - 推酷
自适应滑动插件swiper.js
分类：WEB前端
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果,也有3D效果，支持鼠标滚轮和键盘。它的目的是用于移动网站,移动web应用程序和移动本地/混合应用。
1、首先加载插件，有swiper.min.js和swiper.min.css文件。
2、HTML内容，Swiper基本的布局。
3、初始化Swiper，这样你想要的滑动效果就实现了,他有很多参数可以供你自定义
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',//水平还是垂直方向
loop: true,//循环
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
Swiper官网：http://www.idangero.us/swiper
Swiper中文网：.cn/
来源：自适应滑动插件swiper.js
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
字体：[ ] 类型：转载 时间：
Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。这篇文章主要介绍了AngularJS 中使用Swiper制作滚动图不能滑动的解决方法,需要的朋友可以参考下
Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。
今天在使用Swiper的时候遇到这个问题：
使用angularjs动态循环生成swiper-slide类，在swiper-wrapper里生成6个以上的滑动页，可是就是划不到第二页，尝试将longSwipesRatio的值修改到最小，仍然不起作用。
&div class="swiper-wrapper" &
&!-- =======循环部分======= --&
&div class="swiper-slide" ng-repeat="result in mediaList"&
//此处为一个滑动页内容
&!-- ============== --&
在测试时发现，手动复制n个循环部分，则可以滑动n个块；手动调节窗口大小，使页面文档发生改变（动态响应）后，可以正常滑动。
于是猜测swiper的机制是：初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块，则允许滑动多少个块。 而在angular始终在swiper初始化之后定义，swiper则无法正确scan有多少个slide（实际上找到一个待循环模板），所以划不动。
找到原因后，只须对症下药。 在查阅Swiper的API时发现，有这样两个参数：observer和observeParents，前者启动动态检查器，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。后者原理和前者一样，只是将observe应用于Swiper的父元素。两者默认值都为false。 所以在原来的swiper初始化代码中加上这两行即可。
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
paginationClickable: true,
longSwipesRatio: 0.3,
touchRatio:1,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
以上所述是小编给大家介绍的AngularJS 中使用Swiper制作滚动图不能滑动的解决方法，希望对大家有所帮助，如果大家有
任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具

我要回帖

更多关于 swiper 页面内滚动条 的文章

 

随机推荐