详解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 相关文章推荐
JQuery 学习笔记 选择器之二
Jul 23 Javascript
javascript Array.remove() 数组删除
Aug 06 Javascript
动态样式类封装JS代码
Sep 02 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
Vue+Django项目部署详解
May 30 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 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支持页面回退的两种方法
2008/01/10 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python爬取成语接龙类网站
2018/10/19 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Python中求对数方法总结
2020/03/10 Python
捷克时尚网上商店:OTTO
2018/03/15 全球购物
采购主管岗位职责
2014/02/01 职场文书
法院信息化建设方案
2014/05/21 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
超市员工管理制度
2015/08/06 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
Android中View.post和Handler.post的关系
2022/06/05 Java/Android