在移动端使用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. Java 核心编程技术干货，2019 最新整理版！

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 以下是Java技术栈微信公众号发布的所有关于 Java 的技术干货,会从以下几个方面汇总,本文会长期更新. Java 基础篇 ...

  2. csv转字典

    with open('filename','r') as csv_f: reader = csv.reader(csv_f) fieldnames = next(reader) csv_reader ...

  3. 【POJ】1182 食物链

    这是<挑战设计程序竞赛>中的例题. 题目链接:http://poj.org/problem?id=1182 题意:中文题面.不赘述. 题解: 代码: //带权并查集 #include< ...

  4. 网页开发人员收藏的16款HTML5工具

    本文收集的20款优秀的 HTML5 Web 应用程序,值得添加到您的 HTML5 的工具箱中,他们能够帮助你开发前端项目更快.更容易. Initializr Initializr 是一个可以让你创建 ...

  5. PHP算法之增减字符串匹配

    给定只含 "I"(增大)或 "D"(减小)的字符串 S ,令 N = S.length. 返回 [0, 1, ..., N] 的任意排列 A 使得对于所有 i ...

  6. MYSQL查询查找重复的电子邮箱

    编写一个 SQL 查询,查找 Person 表中所有重复的电子邮箱. 示例: +----+---------+| Id | Email |+----+---------+| 1 | a@b.com | ...

  7. c_数据结构_哈希表

    #include <stdio.h> #include <stdlib.h> #include <string.h> #define ERROR 0 #define ...

  8. lombok使用手册

    lombok使用手册: 1.安装插件 1.1.idel: 1.2.使用lombok还需要引用相关jar包 参考网址:https://projectlombok.org/features/all 2.注 ...

  9. 10月23日——作业1——while循环练习

    while循环'''此类编程题,注意带进去试一试1.九九乘法表row=1while row<=9: col=1 while col<=row: print(col,"*" ...

  10. Jmeter接口自动化测试：简单使用步骤

    好处:不需要页面就可以提前介入测试,实施成本低,修改量少,相对于UI自动化来说更为稳定 1. 下载略过 2. 使用步骤 创建线程组合控制器(Jmeter基本操作) 针对http协议的接口增加Sampl ...