JS或者jquery的上拉加载和下拉刷新是怎么实现的

JavaScript07

JS或者jquery的上拉加载和下拉刷新是怎么实现的,第1张

1、首先新建一个html文件,命名为test.html,在test.html文件内,引入jquery.min.js库文件,成功加载该文件,才能使用jquery中的方法。

2、在test.html文件内,使用button标签创建一个按钮,按钮名称分别为“刷新页面”。

3、在test.html文件内,设置button标签的id为btn,主要用于下面通过该id获得button对象。

4、在js标签内,使用$(function(){ })方法在页面加载完成时,通过window.location.href获得当前页面的链接,并把链接保存在变量url中。

5、在js标签内,通过id(btn)获得button对象,给它绑定click点击事件,实现当按钮被点击时,使用window.location.href方法跳转至url,从而实现刷新页面的效果。

6、在浏览器打开test.html文件,点击按钮,查看实现的效果。

1、在options中加入如下参数代码(我的代码是在2470行):

//原本就有的部分

HWCompositing: true,

useTransition: true,

useTransform: true,

//我加入的部分

minScrollY : 0,

minScrollX : 0

2、在下面不远处(十行以内)加入如下参数:

//新加部分

this.minScrollY = this.options.minScrollY

this.minScrollX = this.options.minScrollX

原先就有的部分

this.translateZ = this.options.HWCompositing &&utils.hasPerspective ? ' translateZ(0)' : ''

3、最后一处修改,在resetPosition方法内,此处直接贴上更改之后的方法,其实真正的修改只是将this.minScrollX修改成了(代码在2830行左右):

resetPosition: function (time) {

var x = this.x,

y = this.y

time = time || 0

if ( !this.hasHorizontalScroll || this.x >this.minScrollX ) {

x = this.minScrollX

} else if ( this.x <this.maxScrollX ) {

x = this.maxScrollX

}

if ( !this.hasVerticalScroll || this.y >this.minScrollY ) {

y = this.minScrollY

} else if ( this.y <this.maxScrollY ) {

y = this.maxScrollY

}

if ( x == this.x &&y == this.y ) {

return false

}

this.scrollTo(x, y, time, this.options.bounceEasing)

return true

},

全部修改内容如上,调用的时候,只需要传入minScrollX、minScrollY参数便可实现下拉后回弹上面的预留位置了。

注:对于scroll的滚动区域小于包裹容器的,iscroll禁止滚动,会造成无法实现下拉刷新,这里有一个小技巧,就是给滚动区域加一个min-height:101%

除了在js页面编写响应的逻辑之外,还需要再相应页面的json中写入以下配置,这个配置允许这个页面进行下拉刷新动作

特别需要注意的是:

此外,除了下拉刷新,有时候可能是在某个事件进行时触发刷新动作,此时可以调用wx.startPullDownRefresh(Object object) 此api的作用是:“ 开始下拉刷新。调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。

转自: https://www.cnblogs.com/xunxian/p/12862660.html