html下拉加载实现原理,GitHub - sybiele/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//页面记录数
html下拉加载实现原理,GitHub - sybiele/wxPull: 原生JS实现微信公众号或网页使用下拉加载和上拉刷新...相关推荐
- html下拉加载原理,GitHub - gavinjzx/wxPull: 原生JS实现微信公众号或网页使用下拉加载和上拉刷新...
原生JS实现微信公众号或网页使用下拉加载和上拉刷新 微信浏览器打开网页显示网址安全信息解决办法,网上很多办法,也找了很久,但是最新的很多用不了. 先看看效果,是不是亲想要的,可以跳过,以免浪费宝贵时间 ...
- 微信公众号群发功能的页面元素加载不全的解决办法
解决了一个困扰我一晚上的问题 昨天晚上突然发现,公众号的群发页面加载出现了点问题,好多内容都不显示.元素深查了一下,发现后台爆了一大堆的错误,主要就是各种元素因为"Refused to lo ...
- 分布式事务原理及实战seata(转自微信公众号 终码一生 )
什么是分布式事务? _____________________________________________________________________________ 分布式对应的是单体架构, ...
- 安卓自定义View进阶-事件分发机制原理【转自 app架构师 微信公众号】
注意:本文中所有源码分析部分均基于 API23(Android 6.0) 版本,由于安卓系统源码改变很多,可能与之前版本有所不同,但基本流程都是一致的. 为什么要有事件分发机制? 安卓上面的View是 ...
- 如何实现微信公众号加人数量实时统计?
平时我们做微信公众号推广,想要统计加人的数量,每天有实时数据,微信公众平台提供带参数的二维码请添加链接描述就是用来实现这样的功能的.懂技术开发的可以通过微信公众号接口自行开发编码,不懂的可以通过微号帮 ...
- 微信公众号上拉加载下拉刷新
最近再再做一个公众号的项目有需要用到上拉加载,下拉刷新的技术.在网上找了很久,终于找到一个很好用 js 插件,今天我就把这个插件分享给大家,该包可用于App和微信公众号 , 资源下载地址:https: ...
- html实现微信公众号,H5在微信公众号的下拉刷新实现
由于项目需要在微信公众号做"健康资讯"相关的,所以会用到下拉刷新,可是使用的原生H5做页面,不过希望能够做到和app原生一样的下拉刷新效果,然后在网上找了找H5下拉刷新相关的资料, ...
- 微信公众号扫码登录 提示 网络出错了, 轻触屏幕重新加载-1001错误
iphone 手机扫码或者密码登录, 使用WiFi或者4G扫码 登录微信公众号都提示1001错误 出现问题的场景:调用微信网页授权https://open.weixin.qq.com/connect/ ...
- 【微信小程序控制硬件④】 深度剖析微信公众号配网 Airkiss 原理与过程,esp8266如何自定义回调参数给微信,实现绑定设备第一步!(附带源码)
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
最新文章
- STM32中EXTI和NVIC的关系
- jqueryui autocomplete 控件自定义source检索
- AWS — AWS 上的 DevOps
- linux x下载工具,Linux下强大的Axel下载工具
- [css] 举例说明常用的cursor取值有哪些?
- LwIP Application Developers Manual9---LwIP and multithreading
- bash: telnet: command not found...
- (王道408考研数据结构)第七章查找-第二节1:顺序查找及其优化
- 通过豆瓣Api,输入ISBN获取图书信息
- docker构建dpdk运行环境镜像
- java request含嵌套_使用 RxJava 进行嵌套串行网络请求的一种方法
- WebGL 绘制Line的bug(三)
- Hbase权威指南(含目录,高清,免费)
- 2021-08-07LabVIEW编程LabVIEW控制FS400308系列气体质量流量计例程与相关资料
- 人过大佛寺,寺佛大过人
- win10 ipv4无网络连接
- 美团:后端开发工程师(实习生)面试
- 数字档案管理系统解决方案 - 数字化档案建设方案
- 经典神经网络模型整理
- SimpleITK读取医学影像文件