详解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代码的实现一个图片向上滚动切换
Sep 02 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
node.js如何操作MySQL数据库
Oct 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开发负载均衡指南
2010/07/17 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
php命令行写shell实例详解
2018/07/19 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
利用npm 安装删除模块的方法
2018/05/15 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
使用python绘制人人网好友关系图示例
2014/04/01 Python
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python循环语句中else的用法总结
2016/09/11 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
python代码能做成软件吗
2020/07/24 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
个人委托书范本
2014/04/02 职场文书
大三学习计划书范文
2014/05/02 职场文书
节能宣传周活动总结
2014/05/08 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
护理医院见习报告
2014/11/03 职场文书
2014年残联工作总结
2014/11/21 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
百家讲坛观后感
2015/06/12 职场文书
初一年级组工作总结
2015/08/12 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server