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 ...
随机推荐
- Codeforces Round #499 (Div. 2) Problem-A-Stages(水题纠错)
CF链接 http://codeforces.com/contest/1011/problem/A Natasha is going to fly to Mars. She needs to bui ...
- HDU 6242 Geometry Problem(计算几何 + 随机化)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6242 思路:当 n == 1 时 任取一点 p 作为圆心即可. n >= 2 && ...
- Python之删除字符串中不需要的字符
简单的 str="---你好=====" print(str.strip("-=")) # 你好 从文件中读取多行数据,可以用生成器表达式 with open( ...
- ionic3 多级联动城市选择插件 ion-multi-picker
1.效果演示 2.npm安装扩展包依赖 ion-multi-picker 组件 npm install ion-multi-picker --save 3.在app.module.ts中导入插件模块 ...
- mac 创建多个全局Path
cd ~ 进入根目录 (没有这个文件 先touch .bash_profile) open -e .bash_profile 打开编辑然后保存 JAVA_HOME=/Library/Java/Java ...
- c# DataTable第二行改为各列标题字段
DataTable dt = ExcelHelper.ToDataTable(fileinfo.FilePath); //将datatable的第二行变为列标题字段 DataTable dt2 = n ...
- LSI 9271阵列卡开启JBOD!
1.开机等待读取到RAID卡后按ctrl+y(进入阵列卡命令符界面) 2.输入AdpSetProp EnableJBOD 1 -a0(开启JBOD功能) AdpSetProp EnableJBOD 0 ...
- AtCoder Beginner Contest 127 D,E,F
D Integer Cards 题意:先给出n个数字,然后可以有m次操作,每次操作以数字对(x,y)表示最多能选x个数字把它变成y,问经历m次操作后n个数字和最大为多少? 解法:一个明显正确的做法是: ...
- git 分支相关操作
git status 查看当前工作区 会显示分支 如下 D:\工程\vue_study\testplat_vue>git statusOn branch masternothing to co ...
- ZedGraph怎样在生成曲线时随机生成不一样的颜色
场景 在使用ZedGraph生成多条曲线时为了能区分曲线颜色,要求随机设置曲线颜色. 首先从System.Drawing.Color中获取所有颜色的对象的数组,然后将其顺序打乱随机排序,然后在生成曲线 ...