详解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 var声明变量背后的原理示例解析
Oct 12 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
Angular表单验证实例详解
Oct 20 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python中的filter()函数的用法
2015/04/27 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
python实现flappy bird小游戏
2018/12/24 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Python如何实现爬取B站视频
2020/05/20 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
污水厂厂长岗位职责
2014/01/04 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
学习退步检讨书
2014/09/28 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
人民调解协议书
2016/03/21 职场文书