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

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. vue mock数据(模拟后台)

    本文转载自:https://blog.csdn.net/benben513624/article/details/78562529 vue实现ajax获取后台数据是通过vue-resource,首先通 ...

  2. Visual Studio 2013创建并运行Cocos2d-x工程

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 1.准备: 我们得先把Visual Studio 2013安装好:可以去MSDN官网下载,在安装好 2.安装好vs之后,在cmd(终端)创 ...

  3. Jmeter+ InfluxDB+Grafana安装配置

    前置条件: 系统:windows jmeter:5.1 InfluxDB安装 下载InfluxDB-v1.7.9和Chronograf-v1.7.14(InfluxDB的可视化web端). 下载完成之 ...

  4. 实用maven笔记三-仓库

    maven管理依赖的一个很重要的基础在于,其维护了收集大量依赖jar包的仓库. maven的仓库分类为本地仓库和远程仓库. 构件在仓库的路径大致为:groupId/artifactId/version ...

  5. es7 async 前置依赖

    https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined 移动端 px2rem-lo ...

  6. Android 中MediaPlayer播放音频

    1.播放/res/raw/目录下的音频资源 public class MainActivity extends Activity { MediaPlayer mediaPlayer; int posi ...

  7. Spark和pyspark的配置安装

    如何安装Spark和Pyspark构建Spark学习环境[MacOs] JDK环境 Python环境 Spark引擎 下载地址:Apache-Spark官网 MacOs下一般安装在/usr/local ...

  8. c# DataTable join 两表连接

    转:https://www.cnblogs.com/xuxiaona/p/4000344.html JlrInfodt和dtsource是两个datatable,通过[姓名]和[lqry]进行关联 v ...

  9. subst - 替换文件中的定义

    总览 (SYNOPSIS) subst [ -e editor ] -f substitutions victim ... 描述 (DESCRIPTION) Subst 能够 替换 文件 的 内容, ...

  10. 安装 sysbench的 报错 /usr/bin/ld: cannot find -lmysqlclient_r 解决办法

    首先你需要找到这个库的位置 一般找的话需要将lib 给加上(注意:我这里是 -lmysqlclient_r 的报错,于是我找就找 libmysqlclient_r ) find / -name lib ...