文档章节

iscroll 使用同个wrapper多状态数据切换重新定位到顶部

壹峰
 壹峰
发布于 2018/07/31 17:08
字数 352
阅读 4
收藏 0

https://blog.csdn.net/qq_26409411/article/details/79021301

问题:移动端同个页面,有个状态导航栏(几种状态)切换请求数据操作同一个wrapper里面的数据。不同状态切换过程中,新的状态如果数据量多《无法自动回滚到顶部》。

html代码结构:

<div id="wrapper" >
<div id="scroller">
<div id="pullDown" style="display: none;">
<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
</div>
<div id="pullDowns" style="display: none;">
<span class="pullDownIcon"></span><span class="">下拉刷新...</span>
</div>

<!--  数据appen块  -->
<ul id="dataList">

</ul>

<div id="pullUp" style="display: none;">
<span class="pullUpIcon"></span><span class="pullUpLabel"></span>
</div>
<div id="noData">
<span>已经看到最后</span>
</div>
</div>
</div>

解决方法:切换时先执行原数据回滚到顶部操作,再延迟执行数据请求:

myScroll.scrollTo(0,0,1); // 1指的是回滚到顶部用的时间。我设置1ms  o.o是可以的。
setTimeout("getStatusData("+flag+")",2); // 延迟2ms 执行请求数据。请求方法因人而异。

 

此篇文章只是为了给自己存个档,我自己是解决了自动回滚到顶部问题,不喜勿喷。

本文转载自:https://blog.csdn.net/qq_26409411/article/details/79021301

壹峰
粉丝 9
博文 595
码字总数 9582
作品 0
广州
其他
私信 提问
前端必备自定义滚动库——iScroll

作者真的很懒,这篇文章从想法开始到现在都几个月了。😊 iScroll是什么 很多场景,如果使用body的滚动会很不方便,这时候,就会使用某个元素的局部滚动,恶心的事情就会发生了。 pc端web,...

chavesgu
05/21
0
0
iScroll 5 beta 1 发布,跨浏览器的滚动插件

iScroll 5 beta 1 发布了,这是一个全新的版本,在 API 上并不兼容 v4 版本,但愿你的升级过程不会太痛苦。 官方发行说明:http://cubiq.org/iscroll-5-ready-for-beta-test iScroll 的诞生是...

oschina
2013/06/03
3.4K
5
iscroll4文本框输入后会列表内容溢出导致上下滑动出现偏离

在iscroll4的例子上添加了几个文本框 然后发现在点击文本框的时候如果文本框的位置在弹出键盘的上方则没有事,如果弹出的键盘正好覆盖文本框 这个时候如果在文本框内输入文字会把iscroll4滑动...

sky止殇
2013/08/08
1K
2
当better-scroll 遇见Vue

前言:在学习黄轶老师的《Vue.js高仿饿了么外卖App》课程中接触到了better-scroll第三方JavaScript组件库,这是黄轶老师自己基于iscroll重写的库。这里结合黄轶老师的知乎文章和Vue2.0项目对...

大灰狼的小绵羊哥哥
2018/11/23
0
0
使用iScroll时,input等不能输入内容的解决方法

最近做移动平台的应用,使用iscroll使屏幕上下滑动。发现当使用iscroll后,input等不能输入内容了。只要在iscroll.js文件中加入如下代码就ok了。 function allowFormsInIscroll(){ [].slice...

林宝基
2013/09/04
448
0

没有更多内容

加载失败,请刷新页面

加载更多

Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
11分钟前
3
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
今天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
今天
4
0
轻量级 HTTP(s) 代理 TinyProxy

CentOS 下安装 TinyProxy yum install -y tinyproxy 启动、停止、重启 # 启动service tinyproxy start# 停止service tinyproxy stop# 重启service tinyproxy restart 相关配置 默认...

Anoyi
今天
0
0
Linux创建yum仓库

第一步、搞定自己的光盘 #创建文件夹 mkdir -p /media/cdrom #挂载光盘 mount /dev/cdrom /media/cdrom #编辑配置文件使其永久生效 vim /etc/fstab 第二步,编辑yun源 vim /ect yum.repos.d...

究极小怪兽zzz
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部