详解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实现背景墙聚光灯效果示例分享
Mar 02 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
React配置子路由的实现
Jun 03 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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
python开发简易版在线音乐播放器
2017/03/03 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
python多进程并行代码实例
2019/09/30 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
员工评语大全
2014/01/19 职场文书
小学少先队活动方案
2014/02/18 职场文书
促销活动总结
2014/04/28 职场文书
家长高考寄语
2015/02/27 职场文书
城管个人总结
2015/02/28 职场文书
个人年终总结范文
2015/03/09 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
2019年最新借条范本!
2019/07/08 职场文书
详解Laravel制作API接口
2021/05/31 PHP
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS