详解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实现的图片切换焦点图整理
Dec 07 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 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 4.2书写安全的脚本
2006/10/09 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python 调用HBase的简单实例
2016/12/18 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Python devel安装失败问题解决方案
2020/06/09 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
运动会通讯稿100字
2014/01/31 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python