mescroll.js API汇总
// 初始化mescrollfunction initMeScroll() {//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;//是否为ios设备;var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端//是否为PC端,如果是scrollbar端,默认自定义滚动条var isPC = typeof window.orientation == 'undefined' ;var mescroll = new MeScroll("mescroll", {//下拉刷新的所有配置项down:{use: true, //是否初始化下拉刷新; 默认trueauto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认trueautoShowLoading: true, //如果在初始化完毕之后自动执行下拉回调,是否显示下拉刷新进度; 默认falseisLock: false, //是否锁定下拉,默认false;isBoth: false, //下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载;默认false,两者不可同时触发;callback: function(mescroll) {//加载轮播数据getRankingListDown();//下拉刷新的回调,默认重置上拉加载列表为第一页// mescroll.resetUpScroll();},offset: 60, //触发刷新的距离,默认80outOffsetRate: 0.2, //超过指定距离范围外时,改变下拉区域高度比例;小于1,越往下拉高度变化越小;mustToTop: !isIOS, //是否列表必须滑动到顶部才能下拉;因为列表回弹效果(-webkit-overflow-scrolling:touch)是iOS专属样式,所以iOS默认false,其他为true;hardwareClass: "mescroll-hardware", //硬件加速样式;解决iOS下拉因隐藏进度条而闪屏的问题,参见mescroll.min.csswarpClass: "mescroll-downwarp", //容器,装载布局内容,参见mescroll.min.cssresetClass: "mescroll-downwarp-reset", //高度重置的动画,参见mescroll.min.csshtmlContent: '<p class="downwarp-progress"></p><p class="downwarp-tip">下拉刷新</p>', //布局内容inited: function(mescroll, downwarp) {console.log("down --> inited");//初始化完毕的回调,可缓存dommescroll.downTipDom = downwarp.getElementsByClassName("downwarp-tip")[0];mescroll.downProgressDom = downwarp.getElementsByClassName("downwarp-progress")[0];},inOffset: function(mescroll) {console.log("down --> inOffset");//进入指定距离offset范围内那一刻的回调if(mescroll.downTipDom) mescroll.downTipDom.innerHTML = "下拉刷新";if(mescroll.downProgressDom) mescroll.downProgressDom.classList.remove("mescroll-rotate");},outOffset: function(mescroll) {console.log("down --> outOffset");//下拉超过指定距离offset那一刻的回调if(mescroll.downTipDom) mescroll.downTipDom.innerHTML = "释放更新";},onMoving: function(mescroll, rate, downHight) {//下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离offset的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度console.log("down --> onMoving --> mescroll.optDown.offset="+mescroll.optDown.offset+", downHight="+downHight+", rate="+rate);if(mescroll.downProgressDom) {var progress = 360 * rate;mescroll.downProgressDom.style.webkitTransform = "rotate(" + progress + "deg)";mescroll.downProgressDom.style.transform = "rotate(" + progress + "deg)";}},beforeLoading: function(mescroll, downwarp) {console.log("down --> beforeLoading");//准备触发下拉刷新的回调return false; //如果要完全自定义下拉刷新,那么return true,此时将不再执行showLoading(),callback();},showLoading: function(mescroll) {console.log("down --> showLoading");//触发下拉刷新的回调if(mescroll.downTipDom) mescroll.downTipDom.innerHTML = "加载中 ...";if(mescroll.downProgressDom) mescroll.downProgressDom.classList.add("mescroll-rotate");}},//上拉加载的所有配置项up: {use: true, //是否初始化上拉加载; 默认trueauto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认falseisLock: false, //是否锁定上拉,默认false;当列表没有更多数据时会自动锁定不可上拉;在endSuccess如果检查到有下一页数据,则会自动解锁trueisBoth: false, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;callback: getRankingListUp, //上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }page: {num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始size: 12, //每页数据条数time: null //加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;},noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看offset: 100, //离底部的距离resetShowDownScroll: false, //重置上拉加载数据,是否显示下拉的进度布局;默认false,默认显示上拉加载的进度布局;toTop: {//回到顶部按钮,需配置src才显示src: "", //图片路径,默认null;offset: 1000, //列表滚动多少距离才显示回到顶部按钮,默认1000warpClass: "mescroll-totop", //按钮样式,参见mescroll.min.cssshowClass: "mescroll-fade-in", //显示样式,参见mescroll.min.csshideClass: "mescroll-fade-out", //隐藏样式,参见mescroll.min.cssduration: 300 //回到顶部的动画时长,默认300ms},loadFull: {use: false, //列表数据过少,不足以滑动触发上拉加载,是否自动加载下一页,直到满屏或者无更多数据为止;默认false,因为可通过调高page.size避免这个情况delay: 500 //延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;},empty: {//列表第一页无任何数据时,显示的空提示布局; 需配置warpId或clearEmptyId才生效;warpId:'webGame', //父布局的id; 如果此项有值,将不使用clearEmptyId的值;icon: null, //图标,默认nulltip: "暂无相关数据~", //提示btntext: "", //按钮,默认""btnClick: null, //点击按钮的回调,默认null},clearId: null, //加载第一页时需清空数据的列表id; 如果此项有值,将不使用clearEmptyId的值;clearEmptyId: "", //相当于同时设置了clearId和empty.warpId; 简化写法;hardwareClass: "mescroll-hardware", //硬件加速样式,动画更流畅,参见mescroll.min.csswarpClass: "mescroll-upwarp", //容器,装载布局内容,参见mescroll.min.csshtmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', //上拉加载中的布局htmlNodata: '<p class="upwarp-nodata">更多精彩敬请期待</p>', //无数据的布局inited: function(mescroll, upwarp) {console.log("up --> inited");//初始化完毕的回调,可缓存dom 比如 mescroll.upProgressDom = upwarp.getElementsByClassName("upwarp-progress")[0];},showLoading: function(mescroll, upwarp) {console.log("up --> showLoading");//上拉加载中.. mescroll.upProgressDom.style.display = "block" 不通过此方式显示,因为ios快速滑动到底部,进度条会无法及时渲染upwarp.innerHTML = mescroll.optUp.htmlLoading;},showNoMore: function(mescroll, upwarp) {console.log("up --> showNoMore");//无更多数据upwarp.innerHTML = mescroll.optUp.htmlNodata;},onScroll: function(mescroll, y){ //列表滑动监听,默认onScroll: null;//y为列表当前滚动条的位置console.log("up --> onScroll 列表当前滚动的距离 y = " + y);},scrollbar: {use: isPC, //默认只在PC端自定义滚动条样式barClass: "mescroll-bar"}}});return mescroll;}
mescroll.js API汇总相关推荐
- 七天学会Node.js(汇总)
七天学会Node.js(汇总) 文章目录 七天学会Node.js(汇总) 1. NodeJS基础 什么是NodeJS 有啥用处 如何安装 安装程序 编译安装 如何运行 权限问题 模块 require ...
- 全网最全面的 Node.js 资源汇总推荐,4W Star!
作者@前哨君|地址@https://github.com/jobbole/awesome-nodejs-cn由于微信不支持外链,可文末 "阅读原文" 或打开 Github 地址查看 ...
- Github 4 万 Star!最全面的 Node.js 资源汇总推荐
点击"程序员成长指北",选择"星标????" 让一部分开发者看到未来 作者@前哨君|地址@https://github.com/jobbole/awesome- ...
- 最全面的 Node.js 资源汇总推荐
作者@前哨君|地址@https://github.com/jobbole/awesome-nodejs-cn [导读]:Node.js 是一个开源.跨平台的,用于编写服务器和命令行的 JavaScri ...
- Node.js API参考文档(目录)
Node.js v11.5.0 API参考文档 Node.js®是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时. 关于文档 用法和示例 断言测试 稳定性:2 - 稳 ...
- 高德地图 JS API - 根据地名实现标记定位
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...
- ArcGIS JS API 4.X实现动态地图服务子图层显隐控制
ArcGIS JS API 4.X实现动态地图服务子图层显隐控制 文章目录 ArcGIS JS API 4.X实现动态地图服务子图层显隐控制 使用场景 官网示例 注意事项 使用场景 图层控制功能 官网 ...
- 基于ArcGIS JS API 4.11实现对FeatureLayer的多变量渲染
文章目录 需求背景 需求分析 开发过程 效果图 注意事项 参考链接 在线示例 需求背景 有一个二维数组,里面包含几万个表示高度的值,现在要把这些高度值在地图上展示出来.可以通过小立方体的方式展现,长宽 ...
- ArcGIS JS API加载GeoServer发布的WFS服务
文章目录 前言 主要代码 总结 参考链接 前言 WFS(Web Feature Service),OGC标准下的要素服务.其支持的主要操作如下: GetCapabilities (discovery ...
- 使用ArcGIS JS API加载WMTS图层的两种方式
文章目录 前言 方式一 方式二 前言 某些项目可能多方参与,每一方使用的GIS平台有时会有所不同,这时为了统一各方地图服务,通常会发布OGC标准的WMTS地图服务供各方使用.ArcGIS API fo ...
最新文章
- 最新SOTA模型和实现代码
- 10 个 Linux 中方便的 Bash 别名
- 网络安全:HTTP Host 头攻击相关知识介绍
- Eratosthenes筛法求1-100之间的素数
- 编译原理教程_3 词法分析
- 计算机网络和lnternet的课件,Computer Networks and Internets《计算机网络与因特网》课件.ppt...
- TabBars代码解读之——Visual Studio的自动化接口
- Microsoft Visio-Microsoft Visio下载
- 到底什么是上位机,什么是下位机?
- 《视觉SLAM十四讲》笔记摘抄
- ! [remote rejected] master -> master (pre-receive hook declined)
- c语言实现输入电压检测,STC12C2052AD单片机AD转换C语言程序的实现
- 外文搜索数据库小记(工科)
- 摩云ktv点歌系统服务器,摩云ktv点歌服务器系统更新
- 2014年十大云计算发展趋势分析及预测
- php 验证手机号邮箱,PHP正则验证真实姓名、手机号码、邮箱
- 微信小程序导入微信聊天记录文件
- pytorch加载自己的数据集,数据集载入-视频合集
- 用友NC65查询凭证明细方法
- vscode python无法跳转到函数定义
热门文章
- 打开qq农场外挂显示无法与服务器同步,稍后再试是怎么回事啊,qq农场为什么打不开...
- 修复ie浏览器主页被360篡改
- 测井 时深转换 matlab,时深转换操作步骤.pdf
- Linux下载的详细教程
- 计算机毕业设计java+ssm的在线投票管理系统(源码+系统+mysql数据库+Lw文档)
- 【转载】DirectX支配游戏!历代GPU架构全解析
- Java进阶之FileUpload完成上传
- 在windows下使用cmd命令全速下载百度云文件
- Oracle集群时间同步
- 经济应用文写作【9】