html下拉加载原理,GitHub - gavinjzx/wxPull: 原生JS实现微信公众号或网页使用下拉加载和上拉刷新...

原生JS实现微信公众号或网页使用下拉加载和上拉刷新

微信浏览器打开网页显示网址安全信息解决办法,网上很多办法，也找了很久，但是最新的很多用不了。

先看看效果，是不是亲想要的，可以跳过，以免浪费宝贵时间。用微信打开以下网址浏览效果(用微信打开)：http://atigege.com/case/web/wxPull/

我的解决思路：

1、直接在样式表里的html和body上加上：touch-action:none;

html,body{touch-action:none}

2、然后把touch事件全部用js来处理。包括滚动条的移动也用JS来监听

原理：

初始化配置pull.init()

init中调用extend方法，重置config的值

监听touchstart,touchmove,touchend事件

监听touchstart

记录下开始滑动位置(this.status.start)

记录下滑动时滚动条的位置(this.status.startScrollTop)

清除滑动方向(this.status.direction)

监听touchmove

记录下当前的位置(this.status.end)

记录下手指位移值(this.status.offset)

清除动画时间(this.setTransition(0))

当滚动条没有到底时，滑动只控制滚动条

根据滑动的方向，确认方向，方向一旦赋值，在松开手指前不变更(this.status.direction)

如果方向向上，执行this.touchMoveUp();

如果方向向下，执行this.couchMoveDown();

监听touchEnd

根据方向，this.status.direction="down"时，执行向上this.touchEndDown();

根据方向，this.status.direction="up"时，执行向上this.touchEndUp();

设置this.status.isCanMove=false;

this.setTransition(1),把动画时间设为1秒

this.back(0)复位对象。

使用方法

禁用touch-action

html,body{touch-action:none}

添加HTML元素

下拉刷新提示容器:

下拉刷新

滚动对象:

......

上拉加载提示容器:

上拉加载

开始调用：

var pullObj = pull.init(option)

option选项见下一项

配置参数

var pullObj = pull.init({

elID: "#pull",//下拉对象ID必填

upMessageID: "#upMessage",//上拉加载提示信息ID必填

downMessageID: "#downMessage",//下拉刷新提示信息ID必填

totalRecords: 60,//总记录数

method:"up,down",//调用方法，这里是上拉和下拉都调用

upCallback:function(){这里填写上拉加载回调函数},

downCallback:function(){这里填写下拉刷新回调函数}

}

参数说明：

elID: "",//控制ID

upMessageID: "",//上拉加载提示ID

downMessageID: "",//下拉刷新提示ID

upPullToLoadMore: '上拉加载', // 上拉加载提示

upReleaseToRefresh: '松开加载', //松开加载提示

upRefreshing: '加载中…', // 加载中文字提示

upIsLastMessage: "已经是最后一页",//最后一页文字提示

downPullToRefresh: '下拉刷新', // 下拉刷新文字提示

downReleaseToRefresh: '松开刷新', //松开刷新文字提示

downRefreshing: '刷新中…', // 刷新中文字提示

threshold: 60,//移动距离阀值

maxOffset: 150,//最大可拖动距离

actionOffset: 60,//可引起操作的拖动距离

method: "up,down",//包括方法，up：上拉加载,down:下拉刷新

upCallback: null,//上拉刷新回调函数

downCallback: null,//下拉加载回调函数

totalRecords: 0,//总记录数

pageSize: 20//页面记录数