swiper实现上下滑动翻页,内置内容页也滚动
如果我猜的没错,是全网(哈哈)比较少的成功解决方案,如需要转载,请声明并转载出处。 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实现上下滑动翻页,内置内容页也滚动的更多相关文章
- Dedecms文章内容页和图片集内容页,调用缩略图的方法
文章内容页缩略图的调用,图片集内容页缩略图的调用,相信大家都想找这个,对于初学者来说,一大福音> 文章内容页和图片集内容页,缩略图的调用.适合内页中调用. 1 <img src=" ...
- Dedecms(织梦)文章内容页和图片集内容页,调用缩略图的方法
Dedecms(织梦)文章内容页和图片集内容页,调用缩略图的方法,亲测可用! Dedecms(织梦)首页的图片调用,相信大家已经非常的清楚,但是今天我在进行内容页的编写的时候,发现了内容页图片的调用问 ...
- mint-ui 企业微信PC端内置浏览器 Picker 无法滚动
处理 在主JS代码之上附加以下代码 : <script> if (~navigator.userAgent.toLowerCase().indexOf('windowswechat')) ...
- swiper不能手指滑动翻页的解决办法
/*当swiper中的slide的里面放入长度在手机上不能滑动的时候 放入这段代码就可以了*/ var startScroll, touchStart, touchCurrent; ...
- dede 首页或列表页调用文章内容页body内容
在使用dede过程,有的朋友会调调出文章的列表的内容出来,怎么调呢?当然是用dede的传参的数据查询语句了,方法如下: {dede:arclist flag=h typeid=2 row=1 titl ...
- echarts 柱状图 X(Y)轴数据过多时,滑动以及内置缩放的问题
前言:在开发中碰到的情况(菜鸟出门). 在使用echarts 图表的时候发现要展示的数据过多,但是系统留的展示框太小,造成数据都挤压在一块(不好看而且新感觉很不专业). ...
- 041. asp.net中内容页访问母版页中的控件
母版页运行机制: 用户通过输入内容也的URL来请求某个页面, 获取该页面后, 读取@Page指令, 如果该指令引用了一个母版页, 则也读取该母版页, 如果也是第一次请求这两个页面, 则母版页和被请求的 ...
- ASP.NET 母版页和内容页的加载顺序
Master 模板页Content 内容页如果希望Master页面的数据传给Content页面,请Init如果希望Content页面的数据传给Master页面,请重载Load具体细节不多说了,看下面页 ...
- 桌面浏览器实现滑动翻页效果(Swiper)
还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chin ...
随机推荐
- vue mock数据(模拟后台)
本文转载自:https://blog.csdn.net/benben513624/article/details/78562529 vue实现ajax获取后台数据是通过vue-resource,首先通 ...
- Visual Studio 2013创建并运行Cocos2d-x工程
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 1.准备: 我们得先把Visual Studio 2013安装好:可以去MSDN官网下载,在安装好 2.安装好vs之后,在cmd(终端)创 ...
- Jmeter+ InfluxDB+Grafana安装配置
前置条件: 系统:windows jmeter:5.1 InfluxDB安装 下载InfluxDB-v1.7.9和Chronograf-v1.7.14(InfluxDB的可视化web端). 下载完成之 ...
- 实用maven笔记三-仓库
maven管理依赖的一个很重要的基础在于,其维护了收集大量依赖jar包的仓库. maven的仓库分类为本地仓库和远程仓库. 构件在仓库的路径大致为:groupId/artifactId/version ...
- es7 async 前置依赖
https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined 移动端 px2rem-lo ...
- Android 中MediaPlayer播放音频
1.播放/res/raw/目录下的音频资源 public class MainActivity extends Activity { MediaPlayer mediaPlayer; int posi ...
- Spark和pyspark的配置安装
如何安装Spark和Pyspark构建Spark学习环境[MacOs] JDK环境 Python环境 Spark引擎 下载地址:Apache-Spark官网 MacOs下一般安装在/usr/local ...
- c# DataTable join 两表连接
转:https://www.cnblogs.com/xuxiaona/p/4000344.html JlrInfodt和dtsource是两个datatable,通过[姓名]和[lqry]进行关联 v ...
- subst - 替换文件中的定义
总览 (SYNOPSIS) subst [ -e editor ] -f substitutions victim ... 描述 (DESCRIPTION) Subst 能够 替换 文件 的 内容, ...
- 安装 sysbench的 报错 /usr/bin/ld: cannot find -lmysqlclient_r 解决办法
首先你需要找到这个库的位置 一般找的话需要将lib 给加上(注意:我这里是 -lmysqlclient_r 的报错,于是我找就找 libmysqlclient_r ) find / -name lib ...