详解swipe使用及竖屏页面滚动方法


Posted in Javascript onJune 28, 2018

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

基于swipe4写了一个移动端的全屏滚动效果  但是图片始终不能自适应屏幕设备大小这里记录一下。

开始的时候要设置  移动端配置

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!--这里引入swipe的css文件-->
<link rel="stylesheet" type="text/css" href="css/swiper-4.3.3.min.css" rel="external nofollow" />

然后html,body需要设置   宽高100%  如果swipe中外面还有嵌套的盒子或元素  也必须设置   宽高100%

竖屏效果需要设置

<!--这里引入jquery文件,如果需要的话 -->
<script src="js/jquery-1.12.4.min.js"></script>
<!--这里引入swipe的js文件-->
<script src="js/swiper-4.3.3.min.js"></script>
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',//设置竖屏  横屏类似轮播图是默认效果可以不设置

//slidesPerView: 'auto',//设置slider容器能够同时显示的slides数量,'auto'则自动根据slides的宽度来设定数量。

//centeredSlides: true,//设定为true时,活动块会居中,而不是默认状态下的居左。

//这里是为了显示分页器,前提是html中已经设置了分页器

pagination: {


el: '.swiper-pagination',


type: 'fraction',

},
});
</script>

这里下面有个坑  百度很多属性值都没加引号,导致没作用--最好官网查看一下

例如上面的   el:'.swiper-pagination'   el(属性):'.swiper-pagination'(属性值)

总结

以上所述是小编给大家介绍的swipe使用及竖屏页面滚动方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 #Javascript
浅谈vue首屏加载优化
Jun 28 #Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 #jQuery
Vue SPA单页应用首屏优化实践
Jun 28 #Javascript
Webpack的dll功能使用
Jun 28 #Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 #Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 #Javascript
You might like
PHP与javascript对多项选择的处理
2006/10/09 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
jquery isType() 类型判断代码
2011/02/14 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
element中table高度自适应的实现
2020/10/21 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
python简单实现9宫格图片实例
2020/09/03 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
总经理职责范文
2013/11/08 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
无毒社区工作方案
2014/05/23 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
先进个人申报材料
2014/12/30 职场文书
投标邀请书范本
2015/02/02 职场文书
大学生毕业个人总结
2015/02/15 职场文书
小学英语课教学反思
2016/02/15 职场文书
高质量“欢迎词”
2019/04/03 职场文书