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

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. 什么是AngularJs?特点是什么?和JQuery什么区别和联系

    什么是AngularJs? AngularJs是js框架,集中操作数据,不关注Dom操作,适用于以数据操作为主的的SPA(单页应用). 它的特点 采用MVC模型 双向数据绑定 依赖注入 模块化 与jQ ...

  2. 2019 ACM-ICPC 南京 现场赛 K. Triangle (二分)

    题意 给定一个三角形和一个点 \(p\),如果该点不在三角形边上直接输出 \(-1\),否则在三角形上找一点 \(q\),使得线段 \(pq\) 平分三角形面积. 思路 看完题想都没想直接二分了. 就 ...

  3. css点击高亮

    .btn-default:active:focus, .btn-default:active:hover { color: #333; background-color:lightseagreen; ...

  4. 使用pip安装python模块和包

    点击进入幕布视图浏览 https://mubu.com/doc/a8VGCUfqqw 五.使用pip安装python第三方库. pip的常用命令 方式一:在线安装 1.进入命令行 2.敲入pip命令: ...

  5. Vue 单页应用 的 首屏优化

    对于单页应用,要在一个页面上为用户提供产品的所有功能,在这个页面加载的时候,首先要加载大量的静态资源,这个加载时间相对比较长.所以我们需要做一些相应的优化,减少响应时间,尽快把首屏显示出来. 1.压缩 ...

  6. Invoke-Obfuscation混淆ps文件绕过Windows_Defender

    前提 powershell只能针对win7之后的系统,之前的win操作系统默认没有安装powershell. 所在目录:C:\Windows\System32\WindowsPowerShell\v1 ...

  7. enovia PLM : add new value to SPEO

    Solution: Modify LUX_SPEO attribute in PLM Modify D_SPEO attribute in SAP , Login sap system F3 Tcod ...

  8. ssh-key添加之后依旧需要密码输入Bug的解决

    场景重现 要求从10.183.93.181的root用户ssh免密登录至10.110.155.26的boss用户 1.在10.110.155.26 的boss用户下面新建目录.ssh 2.在10.11 ...

  9. Linux - 退出vim界面

    参考: https://blog.csdn.net/achi010/article/details/72775721 https://www.cnblogs.com/dalaoban/p/938130 ...

  10. Office VBA 参考

    Office VBA 参考:https://docs.microsoft.com/zh-CN/office/vba/api/overview/