在移动端使用swiper的整屏滚动，如果slide里面有滚动内容的话，滚动的时候会整个页面一起滚动，如果想里面的滚动区域单独滚动的话，可以在初始化swiper的时候添加上 noSwipingClass 这个选项，值就是你想滚动的那个区域的class。

new Swiper('#Jswiper', {

    direction: 'vertical',

    noSwipingClass : 'scroll-wrap',

    }

参考链接：http://caibaojian.com/swiper-iscroll.html

swiper 插件里面嵌套可滚动内容的更多相关文章

  1. 移动端网站的内容触摸滑动-Swiper插件

    手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...

  2. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

  3. swiper插件几个容易忽略的地方

    以下内容为swiper4版本的 1.在我们用swiper插件做轮播的当我们左右滑动后会出现自动轮播停止了 此时我们需要在autoplay中 加上这个属性 autoplay:{ delay:1000, ...

  4. 实战：vue项目中导入swiper插件

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...

  5. qrcode.js插件将你的内容转换成二维码格式

    ---qrcode.js插件将你的内容转换成二维码格式--- 我之前一直想知道二维码是怎么生成,所以就了解了一下, 最后还是不知道它的原理, 但是,我知道怎么生成. 现在就让我带你制作一个你喜爱的二维 ...

  6. swiper插件的简单使用，实现图片轮播

    移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...

  7. swiper插件遇上tab切换

    当swiper插件遇到tab切换,即display的显示与否属性时,失效,方法如下: <script language="javascript"> var mySwip ...

  8. ionic3 使用swiper插件 实现轮播效果

    由于app的更新迭代 我需要完成新版本设计图的开发 刚开始就遇到一个问题  首页的banner图需要实现某种效果 而ionic3自带的轮播图效果怎么改都改不到我想要的效果 效果图如下  自动播放 不断 ...

  9. 【react开发】使用swiper插件，loop:true时产生的问题解决方案

    这2天上班遇到的问题:react使用swiper3插件实现banner轮播,其中有个banner图有个click点击事件,而其他的是页面跳转.出现了一个问题: 就是向右滑动到该帧时的swiper,点击 ...

随机推荐

  1. Maven详解（）-- 常用命令

    Maven常用命令: Maven库: http://repo2.maven.org/maven2/ Maven依赖查询: http://mvnrepository.com/ 一,Maven常用命令: ...

  2. access数据库调用

    1.工程环境配置(vs+qt) 点击项目,右键,选择项目设置,选择SQL 2.获取自己数据库的驱动版本有哪些,如下代码所示: QStringList drivers = QSqlDatabase::d ...

  3. HtmlCleanner结合xpath用法（转载）

    HtmlCleaner cleaner = new HtmlCleaner(); TagNode node = cleaner.clean(new URL("http://finance.s ...

  4. webpack3

    6月20号webpack推出了3.0版本,官方也发布了公告.根据公告介绍,webpack团队将未来版本的改动聚焦在社区提出的功能需求,同时将保持一个快速.稳定的发布节奏.本文主要依据公告内容,简单介绍 ...

  5. scrapy的使用--Rcrapy-Redis

    Scrapy-Redis分布式爬虫组件 Scrapy是一个框架,他本身是不支持分布式的.如果我们想要做分布式的爬虫.就需要借助一个组件叫做Scrapy-Redis.这个组件正式利用了Redis可以分布 ...

  6. LeetCode 67. Add Binary【个位补0，不必对齐】【easy】

    Given two binary strings, return their sum (also a binary string). The input strings are both non-em ...

  7. 同步图计算实现最短路径Dijkstra算法

    同上篇讲述pageRank一样,考虑一个顶点V. 根据顶点算法通常步骤1) 接收上个超步发出的入邻居的消息2) 计算当前顶点的值3) 向出邻居发消息 1.接收入邻居的消息 2.求入邻居的最小值,加上顶 ...

  8. CSIC_716_20191116【常用模块的用法 time ,datetime, random, os, sys, hashlib】

    import time import datetime import os import sys import random import hashlib time模块 时间戳(Timestamp) ...

  9. Python 读取本地*.txt文件 替换 内容 并保存

    # r    以只读的方式打开文件,文件的描述符放在文件的开头# w    打开一个文件只用于写入,如果该文件已经存在会覆盖,如果不存在则创建新文件 #路径path = r"D:\pytho ...

  10. pipenv的使用

    首先,确保pip install pipenv已经安装 1.新建一个文件夹,并在地址栏输入cmd,回车. 2.输入pipenv install,等待虚拟环境搭建完毕. 3.输入pipenv shell ...