在移动端使用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. 【学术篇】SDOI2008 仪仗队

    Part1:传送门&吐槽 水题... 然而由于线筛里面的\(j\)打成了\(i\)然后就不能1A了OvO Part2:题目分析 这个正方形是对称的... 而且很显然对角线上只有一个点会被看到. ...

  2. sysobjects syscolumns

    在sysobjects系统表中存储着数据库的所有对象,每个对象都有一个唯一的id号进行标识.object_id就是根据对象名称返回该对象的id.反之,object_name是根据对象id返回对象名称. ...

  3. Windows 隐藏控制台

    #pragma comment( linker, "/subsystem:\"windows\" /entry:\"mainCRTStartup\"& ...

  4. thinkphp 应用编译

    应用编译机制作为ThinkPHP独创的功能特色,从1.0版本就延续至今,3.2版本的编译机制更加具有特色. 应用编译缓存 编译缓存的基础原理是第一次运行的时候把核心需要加载的文件去掉空白和注释后合并到 ...

  5. 背包dp+打表处理——cf999F

    考虑每种c都是可以独立进行计算的,所以这题的答案等价于每种c的最优解之和 计算每种c的最优解:把问题转化成求出每种c的最大值,再转化成i个人分j张卡片的最大收益 dp[i,j]表示i个人分j张卡片的最 ...

  6. CentOS 7.2部署NTP服务器实现时间同步

    CentOS 7.2部署NTP服务器实现时间同步 [日期:2017-12-18] 来源:Linux社区  作者:梁明远 [字体:大 中 小]   1. 前言 对于容器编排系统,前段时间主要研究kube ...

  7. csp-s模拟测试80(b)

    csp-s模拟测试80(b) 水题没什么可写的. $T1SB$规律题正解调了仨小时就过了. $T2SBDp$题颓完题解就秒了. $T3SB$数据结构考场想到正解就弃了,考后太懒一半正解一发随机化就A了 ...

  8. Heartbeat基本介绍----HA / vmware HA FT

    Heartbeat是High-Availability Linux Project (Linux下的高可用性项目)的产物,是一套提供防止业务主机因不可避免的意外性或计划性宕机问题的高可用性软件.Hea ...

  9. C语言进阶学习第二章

    本章重点记录指针的各种概念: 1.地址与内容 2.非法的赋值 3.NULL指针:NULL指针作为一个特殊的指针变量,表示不指向任何东西,在对指针进行解引用操作之前,首先必须 确保它并非NULL指针. ...

  10. assert（断言）

    Python assert(断言)用于判断一个表达式,在表达式条件为 false 的时候触发异常. 语法格式: assert expression 等价于: if not expression: ra ...