在移动端使用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. Linux下rsync的安装及简单使用

    2018-09-25 15:39:04 一.RSYNC安装环境: centos6.5 iptables关闭和selinux为disabled 源码安装:到rsync官网下载rsync源码安装包,上传到 ...

  2. C#下面的次幂表达

    嗯,一个错误.不能用x^y表达,要用math.pow(x,y).

  3. JS函数 函数的作用，可以写一次代码，然后反复地重用这个代码。

    什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; alert(sum ...

  4. HTML样式链接到外部样式表

    w3cschool链接:http://www.w3school.com.cn/html/html_css.asp <html> <head><link rel=" ...

  5. eclipse导出说明文档

    选中项目--右键--Export--Java--Javadoc—Finish 1.为程序添加文档注释 2.选中项目--右键Export--Java--Javadoc--next, 3.next--在V ...

  6. jmeter遇到的问题：java.net.ConnectException: Connection refused: connect

    1.使用jmeter执行脚本,在察看结果树的的响应数据中看到的错误提示如下: java.net.ConnectException: Connection refused: connect at jav ...

  7. thinkphp 包含文件

    在当前模版文件中包含其他的模版文件使用include标签,标签用法: <include file='模版表达式或者模版文件1,模版表达式或者模版文件2,...' /> 博智达直线电机价格 ...

  8. 如何HOOK桌面窗口消息

    代码详见:http://download.csdn.net/detail/swanabin/6771465 需求:截获桌面窗口鼠标单击事件,解析所选中的桌面 Item,并将解析后的 item 信息发送 ...

  9. 记录一次idea因为修改子模块名称而引申的一大堆问题（未完全解决）

    文章目录 背景 看图说话 解决 因为这个案例引申出来的错误 修改了之后莫名出现在java 和resource文件后面出现sources root字样 修改了之后java和resource后面出现了[c ...

  10. elasticsearch的索引清理

    curl -XDELETE 'http://127.0.0.1:9200/winlogbeat-6.0.0-2017.07.*' 脚本加api删除(推荐) cat es-index-clear.sh ...