详解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 相关文章推荐
Javascript 类与静态类的实现
Apr 01 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
vue中锚点的三种方法
Jul 06 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 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
Laravel开启跨域请求的方法
2019/10/13 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中的条件判断语句基础学习教程
2016/02/07 Python
python删除某个字符
2018/03/19 Python
Django实现表单验证
2018/09/08 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python二维键值数组生成转json的例子
2019/12/06 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
Python接收手机短信的代码整理
2020/08/02 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
个人安全生产承诺书
2014/05/22 职场文书
应聘会计求职信
2014/06/11 职场文书
2015年保管员工作总结
2015/04/30 职场文书
爱的教育读书笔记
2015/06/26 职场文书
java解析XML详解
2021/07/09 Java/Android
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS