如果我猜的没错,是全网(哈哈)比较少的成功解决方案,如需要转载,请声明并转载出处。

swiper实现了上下滑动翻页,但是有几个页面的内容显示不完。如果一页显示不完时可以滑动查看,应该怎么做?
这个是我多次查找资料,发现关于这块的内容真正起作用的很少。 直接贴代码:
//控制页面滚动
var startScroll, touchStart, touchCurrent;
swiper.slides.on('touchstart', function(e) {
startScroll = this.scrollTop;
touchStart = e.targetTouches[0].pageY;
}, true);
swiper.slides.on('touchmove', function(e) {
touchCurrent = e.targetTouches[0].pageY;
var touchesDiff = touchCurrent - touchStart;
var slide = this;
var onlyScrolling =
(slide.scrollHeight > slide.offsetHeight) && //allow only when slide is scrollable
(
(touchesDiff < 0 && startScroll === 0) || //start from top edge to scroll bottom
(touchesDiff > 0 && startScroll === (slide.scrollHeight - slide.offsetHeight)) || //start from bottom edge to scroll top
(startScroll > 0 && startScroll < (slide.scrollHeight - slide.offsetHeight)) //start from the middle
);
if (onlyScrolling) {
e.stopPropagation();
}
}, true);
 

swiper实现上下滑动翻页,内置内容页也滚动的更多相关文章

  1. Dedecms文章内容页和图片集内容页,调用缩略图的方法

    文章内容页缩略图的调用,图片集内容页缩略图的调用,相信大家都想找这个,对于初学者来说,一大福音> 文章内容页和图片集内容页,缩略图的调用.适合内页中调用. 1 <img src=" ...

  2. Dedecms(织梦)文章内容页和图片集内容页,调用缩略图的方法

    Dedecms(织梦)文章内容页和图片集内容页,调用缩略图的方法,亲测可用! Dedecms(织梦)首页的图片调用,相信大家已经非常的清楚,但是今天我在进行内容页的编写的时候,发现了内容页图片的调用问 ...

  3. mint-ui 企业微信PC端内置浏览器 Picker 无法滚动

    处理 在主JS代码之上附加以下代码 : <script> if (~navigator.userAgent.toLowerCase().indexOf('windowswechat')) ...

  4. swiper不能手指滑动翻页的解决办法

    /*当swiper中的slide的里面放入长度在手机上不能滑动的时候 放入这段代码就可以了*/    var startScroll, touchStart, touchCurrent;        ...

  5. dede 首页或列表页调用文章内容页body内容

    在使用dede过程,有的朋友会调调出文章的列表的内容出来,怎么调呢?当然是用dede的传参的数据查询语句了,方法如下: {dede:arclist flag=h typeid=2 row=1 titl ...

  6. echarts 柱状图 X(Y)轴数据过多时,滑动以及内置缩放的问题

    前言:在开发中碰到的情况(菜鸟出门).           在使用echarts 图表的时候发现要展示的数据过多,但是系统留的展示框太小,造成数据都挤压在一块(不好看而且新感觉很不专业).       ...

  7. 041. asp.net中内容页访问母版页中的控件

    母版页运行机制: 用户通过输入内容也的URL来请求某个页面, 获取该页面后, 读取@Page指令, 如果该指令引用了一个母版页, 则也读取该母版页, 如果也是第一次请求这两个页面, 则母版页和被请求的 ...

  8. ASP.NET 母版页和内容页的加载顺序

    Master 模板页Content 内容页如果希望Master页面的数据传给Content页面,请Init如果希望Content页面的数据传给Master页面,请重载Load具体细节不多说了,看下面页 ...

  9. 桌面浏览器实现滑动翻页效果(Swiper)

    还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chin ...

随机推荐

  1. Xen的概况

    1. Xen Live CD xen也有Live CD的形式,当然是少不了Dom 0的,有Apline Linux和Debian两种. 参见http://wiki.xen.org/wiki/LiveC ...

  2. HDU 6242 Geometry Problem(计算几何 + 随机化)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6242 思路:当 n == 1 时 任取一点 p 作为圆心即可. n >= 2 && ...

  3. http常见状态码及其解析

    HTTP状态码常见状态码及其解析 状态码 状态码英文名称 中文描述 100 Continue 继续.客户端应继续其请求 101 Switching Protocols 切换协议.服务器根据客户端的请求 ...

  4. 比较全面的CSS hack方式一览

    转载请注明来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览>   做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某 ...

  5. docker swarm创建swarm集群

    三台linux主机 manager:192.168.100.151 work1:192.168.100.156 work2:192.168.100.157 manager docker swarm i ...

  6. Codeforces 488C Fight the Monster

    Fight the Monster time limit per test             1 second                                   memory ...

  7. 2018APIO 进京赶考

    先见识了一下CTSC的操作...涨了见识... 打铁匠x1 见识了个全英文的ppt,各种讲课其实真的讲的很好,只是逻辑性太强反而让完全不会的同学有些尴尬... linux真的令人窒息...GUIDE用 ...

  8. Python之字典中的键映射多个值

    字典的键值是多个,那么就可以用列表,集合等来存储这些 键值 举例 print({"key":list()}) # {'key': []} print({"key" ...

  9. junit单元测试报错Failed to load ApplicationContext,但是项目发布到tomcat浏览器访问没问题

    junit单元测试报错Failed to load ApplicationContext,但是项目发布到tomcat浏览器访问没问题,说明代码是没问题的,配置也没问题.开始时怀疑是我使用junit版本 ...

  10. linux学习总结--linux100day(day1)

    写在前面:我是一名在学习linux的小学生,最近在学习python时,我的老师推荐了github上的一本教材“python100day”,100day里面的内容由浅入深,且都具备详细的例子,对于我这个 ...