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

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. angular 通过路由获取ID

    constructor( private dataService: TestListsService, private route: ActivatedRoute, ) { // 通过路由获取ID c ...

  2. 2019牛客多校第⑨场H Cutting Bamboos(主席树+二分)

    原题:https://ac.nowcoder.com/acm/contest/889/H 题意: 给你一些竹子,q个询问,问你从第l到第r个竹子,如果你要用y次砍完它,并且每次砍下来的长度是相同的,问 ...

  3. linux下文件编码格式转换方法(gb18030/utf-8)

    文章转载自:http://www.firekyrin.com/archives/249.html linux下文件编码格式转换方法(gb18030/utf-8) 在Linux做开发或者系统管理遇到乱 ...

  4. 2.1 Nginx服务器安装

    2.1 Nginx目录和文件介绍 windows下解压nginx后的文件介绍: conf:存放Nginx服务器的配置文件,包含Nginx服务器的基本配置文件和对部分特性的配置文件,正确配置此文件可以保 ...

  5. 关于char(M)和varchar(N)的区别

    1.int(10)的10表示显示的数据的长度,不是存储数据的大小:chart(10)和varchar(10)的10表示存储数据的大小,即表示存储多少个字符. int(10) 10位的数据长度 9999 ...

  6. Vue篇

    Vue面试中经常会被问到的面试题   对于MVVM的理解 MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...

  7. 如何深入理解Java泛型

    一.泛型的作用与定义 1.1泛型的作用 使用泛型能写出更加灵活通用的代码泛型的设计主要参照了C++的模板,旨在能让人写出更加通用化,更加灵活的代码.模板/泛型代码,就好像做雕塑时的模板,有了模板,需要 ...

  8. python调用tushare获取沪深股通十大成交股

    接口:hsgt_top10 描述:获取沪股通.深股通每日前十大成交详细数据 注:tushare库下载和初始化教程,请查阅我之前的文章 输入参数 名称      |      类型      |    ...

  9. Electron 常见问题

    导读: 以下记录了作者在实践中遇到的问题和最后的解决方法,如果有错误或者更新更完美的解决方案,欢迎留言指正.交流. 1.jQuery/RequireJS/Meteor/AngularJS 的问题 jQ ...

  10. QPrinter

    在使用到QPrinter和QprintDialog类时的附加处理 ①若是在qt creator中,需要在 (.pro)工程文件中加入 “QT+= printsupport”,否则会编译报错