详解swipe使用及竖屏页面滚动方法
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使用及竖屏页面滚动方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
解决vue中使用swiper插件问题及swiper在vue中的用法
Swiper简介 Swiper常用于移动端网站的内容触摸滑动. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题 这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template> <div clas
-
微信小程序之swiper轮播图中的图片自适应高度的方法
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下swiper的高度. 1.结构 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}
-
vue项目中导入swiper插件的方法
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容 给Swiper定义一个大小 初始化Swiper 我也按照这个流程编写组件: 加载插件
-
react中使用swiper的具体方法
正文 最近的react项目需要使用轮播图,自然而然的就想到了swiper,一直想通过npm安装的方式来使用,但是网上找了很多,资料很少,于是就暂时通过在index.html里直接引用swiper的js和css文件的方式来加载,下面来说一下具体的步骤和使用方法. 首先说一下我这里使用的是swiper3x系列.接下来说具体的步骤: 在index.html中引入js和css文件 <!DOCTYPE html> <html lang="en"> <head>
-
vue引入新版 vue-awesome-swiper插件填坑问题
本文介绍了关于新版 vue-awesome-swiper,分享给大家,具体如下: 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的vue-awesome-swiper不会自动播放? 为什么我的vue-awesome-swiper没有? 使用 引入(前面的步骤和往常一样) npm install vue-awesome-swiper --save 在 main,js 里引入(全局): import VueAwesomeSwiper from
-
详解swipe使用及竖屏页面滚动方法
Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 基于swipe4写了一个移动端的全屏滚动效果 但是图片始终不能自适应屏幕设备大小这里记录一下. 开始的时候要设置 移动端配置 <meta name="viewport" content=&quo
-
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
方案一:grunt-livereload + Chrome Plug-in 优点:安装.配置简单方便. 缺点:需要配合指定的浏览器插件(Firefox也有相关插件,IE么你懂的). 1. 需要安装2个插接件:grunt-contrib-watch.connect-livereload 执行命令: 复制代码 代码如下: npm install --save-dev grunt-contrib-watch connect-livereload 2. 安装浏览器插件:Chrome LiveReload
-
详解微信小程序中的页面代码中的模板的封装
详解微信小程序中的页面代码中的模板的封装 最近在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰.那今天所要记录的就是关于微信小程序中的页面的模板封装. 在微信小程序中的文件名都带有wxml等样式,在wxml中提供了模板,即可以在模板中定义代码片段,然后可以在页面中的不同位置进行调用,模板的定义: <templatename="products&
-
Django模板标签中url使用详解(url跳转到指定页面)
django {% url %} 模板标签使用 inclusions/_archives.html ... {% for date in date_list %} <li> <a href="{% url 'blog:archive' date.year date.month %}" rel="external nofollow" > {{ date.year }} 年 {{ date.month }} 月 </a> </l
-
iphone刘海屏页面适配方法
1. 下面是实现iphonex 刘海屏前端页面适配的一个插值算法小案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body, ul { margin: 0; } ul { padding-left: 10px; } li { list-styl
-
详解微信小程序设置底部导航栏目方法
详解微信小程序设置底部导航栏目方法 小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备 阿里图标库 http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面 点击下
-
详解Vue中的MVVM原理和实现方法
下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 一.思路整理 实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi
-
详解BeautifulSoup获取特定标签下内容的方法
以下是个人在学习beautifulSoup过程中的一些总结,目前我在使用爬虫数据时使用的方法的是:先用find_all()找出需要内容所在的标签,如果所需内容一个find_all()不能满足,那就用两个或者多个.接下来遍历find_all的结果,用get_txt().get('href').得到文本或者链接,然后放入各自的列表中.这样做有一个缺点就是txt的数据是一个单独的列表,链接的数据也是一个单独的列表,一方面不能体现这些数据之间的结构性,另一方面当想要获得更多的内容时,就要创建更多的空列表
-
详解PHP合并多个PDF文件的方法
目录 1. composer 安装 PDF组件 2. 使用 1. composer 安装 PDF组件 composer require setasign/fpdi composer require setasign/fpdf 两个组件都需要安装,有依赖关系 2. 使用 <?php try { $fpdi = new Fpdi(); // 设置待处理PDF文件,并且方法返回PDF总计页数 $pagecount1 = $fpdi->setSourceFile("C:\Users\8355
-
详解python中executemany和序列的使用方法
详解python中executemany和序列的使用方法 一 代码 import sqlite3 persons=[ ("Jim","Green"), ("Hu","jie") ] conn=sqlite3.connect(":memory:") conn.execute("CREATE TABLE person(firstname,lastname)") conn.executeman
随机推荐
- 用正则实现提取代码内容的代码
- AJAX的使用方法详解
- Kotlin 开发环境详解及简单实例
- java基于AES对称加密算法实现的加密与解密功能示例
- 再谈Javascript中的基本类型和引用类型(推荐)
- PHP 地址栏信息的获取代码
- python开启多个子进程并行运行的方法
- msyql show命令汇总
- linux大于2T的磁盘使用GPT分区的方法分享
- 关闭页面window.location事件未执行的原因及解决方法
- JQuery实现展开关闭层的方法
- Win XP/2003的预读取文件
- 一个牛人给Java初学者的建议(必看篇)
- C# 绘制统计图大全(柱状图, 折线图, 扇形图)
- 经典排序算法之冒泡排序(Bubble sort)代码
- Android 夜间模式的实现代码示例
- ajax实现页面的局部加载
- 在VMware中Nat方式设置静态IP的方法
- Python对列表的操作知识点详解
- C++多线程中的锁和条件变量使用教程