0.0.4 • Published 6 years ago

vue-mescroll v0.0.4

Weekly downloads
2
License
ISC
Repository
github
Last release
6 years ago

mescroll

mescroll -- 精致的下拉刷新和上拉加载js框架 (JS framework for pull-refresh and pull-up-loading)

http://www.mescroll.com

Vue项目单组件引用请看这里

  1. 原生js, 支持vue, 不依赖jquery,zepto

  2. 一套代码多端运行. 完美运行于android,iOS,手机浏览器,兼容PC主流浏览器

  3. 参数自由搭配, 随心定制, 轻松拓展

  4. 主流APP案例, 丰富经典

  5. 免费商用

  6. mescroll交流群

目录:

  • 最新版本:1.3.2 (2018-01-01) 重要升级
  • 功能亮点
  • 快速入门
  • vue的示例
  • mescroll.m.js和mescroll.min.js
  • 基础案例 base demos
  • 中级案例 intermediate demos
  • 高级案例 senior demos
  • 下载基础中级案例
  • 获取高级案例
  • API文档
  • 常用方法
  • 其他方法
  • 常见问题
  • 打赏排行榜

功能亮点 :

  1. 自动判断和提示列表无任何数据或无更多数据

  2. 支持监听列表滚动事件,无需手动判断处理列表的页码,时间等变量

  3. 可指定列表滚动到任何位置,附带平滑效果一键滚动到顶部或底部

  4. 可配置列表数据不满屏时,自动加载下一页

  5. 一个界面可支持多个下拉刷新,上拉加载

  6. 可临时锁定下拉刷新和上拉加载

NPM

特别感谢 @channg 帮忙整理发布NPM

https://www.npmjs.com/package/mescroll.js NPM 安装命令:

    npm install mescroll.js

Vue单组件

    npm install vue-mescroll

快速入门 :

JS 版本引用

1. 引用 mescroll.min.css , mescroll.min.js

2. 拷贝以下布局结构:

        <div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删
            //列表内容,如:<ul>列表数据</ul> ...
        </div>

3. 创建MeScroll对象:

        var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
    		down: {
			callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
		},
		up: {
			callback: upCallback //上拉加载回调,简写callback:function(page){upCallback(page);}
		}
	});

Vue单组件版本引用

1.

    import Mescroll from 'vue-mescroll/mescroll'

2. 布局结构:

        <me-scroll
	    ref="mescroll"
	    :id="mescroll"	//id默认为 mescroll
	    :opt-up="{}" //up 参数配置(isBounce 默认未false)
	    :opt-down="{}" //down 参数配置
	    :callback="() => {}" //统一回调（up、down均使用此回调）
	    :up-callback="() => {}" //up 回调
	    :down-callback="() => {}"> //down 回调
			
            //列表内容,如:<ul>列表数据</ul> ...
			
        </me-scroll>

3. 获取MeScroll对象实例(ref 可用):

        this.$refs.mescroll.instance
温馨提示:
1. 如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
解析: down内部默认调用的是mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback,从而实现刷新列表数据
2. 如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,则建议配置up的isBounce为false,禁止ios的回弹效果; 解析(必读)

4. 处理回调:

        //下拉刷新的回调
        function downCallback(){
            $.ajax({
                url: 'xxxxxx',
                success: function(data){
                	//联网成功的回调,隐藏下拉刷新的状态;
        		mescroll.endSuccess();//无参
        		//设置数据
        		//setXxxx(data);//自行实现 TODO
               },
               error: function(data){
               		//联网失败的回调,隐藏下拉刷新的状态
        	        mescroll.endErr();
                }
            });
        }

        //上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数
        function upCallback(page){
            $.ajax({
                url: 'xxxxxx?num='+ page.num +"&size="+ page.size,
                success: function(curPageData){
			//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
					
			//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			//必传参数(当前页的数据个数, 总页数)
			//mescroll.endByPage(curPageData.length, totalPage);
					
			//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			//必传参数(当前页的数据个数, 总数据量)
			//mescroll.endBySize(curPageData.length, totalSize);
					
			//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			//必传参数(当前页的数据个数, 是否有下一页true/false)
			//mescroll.endSuccess(curPageData.length, hasNext);
					
			//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
			//如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
			//如果传了hasNext,则翻到第二页即可显示无更多数据.
			//mescroll.endSuccess(curPageData.length);
					
			//设置列表数据
			//setListData(curPageData);//自行实现 TODO
                },
                error: function(){
                	//联网失败的回调,隐藏下拉刷新和上拉加载的状态
	                mescroll.endErr();
                }
         });
        }

--- upCallback推荐的三个方法mescroll.endByPage(), mescroll.endBySize(), mescroll.endSuccess()是mescroll 1.2.1新增的, 请检查更新~ 1.2.1还更新了许多内容哦,点此查看~ 请保持star,这阵子都会有新功能加入~

--- mescroll在vue中的使用案例---------- 点此在线体验 ---------- 点此查看源码 ----------

--- 以上为mescroll最基本的用法,强烈建议您下载并查看 mescroll基础案例 , 发现mescroll更强大的功能 ~ --- 基础案例一共6个, 每个案例3分钟, 一共花您18分钟; 这18分钟您将了解mescroll在不同情况下应如何快速配置 ~ --- 磨刀不误砍柴工,心急吃不了热豆腐. 请静下心来体验与理解mescroll, 一定会让您事半功倍 ~ --- 如使用中有疑问, 请先查看 常见问题专区 ~

mescroll.m.js和mescroll.min.js

您如果在vue,angular等环境中,因作用域的问题未能正常引入或初始化Mescroll对象,则引用mescroll.m.js; mescroll.m.js只是去掉了mescroll.min.js套的一层模块规范的代码:

;(function(name,definition){
    //检测上下文环境是否为AMD或CMD
    var hasDefine = typeof define === 'function',
        // 检测上下文环境是否为Node
        hasExports = typeof module !== 'function' && module.exports;
    if(hasDefine){
        //AMD环境或CMD环境
        define(definition);
    }else if(hasExports){
        //定义为普通Node模块
        module.exports = definition();
    }else{
        //将模块的执行结果挂在window变量中，在浏览器中this指向window对象
        this[name] = definition();
    }

})('Mescroll',function(){
    var Mescroll = function(){}
    return Mescroll
})
mescroll.m.js因为没有闭包限制作用域,所以能解决某些情况下引用mescroll.min.js报'Mescroll' undefined的问题
具体请参考 https://github.com/mescroll/mescroll/issues/56

API文档 :

前往官网查看 >> 

//创建mescroll对象
var mescroll = new MeScroll("mescroll", { down: {下拉刷新的配置参数}, up: {上拉加载的配置参数} });

常用方法 :

前往官网查看 >>

其他方法 :

前往官网查看 >>

基础案例 base demos :

前往官网查看 >>

1. 【商品列表】演示下拉刷新重置列表数据

---------- 在线体验 ---------- 查看源码 ----------

npm.io

2. 【新闻列表】演示下拉刷新添加新数据到列表顶部

---------- 在线体验 ---------- 查看源码 ----------

npm.io

3. 【单mescroll】演示每次切换菜单都重置列表,不缓存数据

---------- 在线体验 ---------- 查看源码 ----------

npm.io

4. 【多mescroll】演示每个菜单列表仅初始化一次,切换菜单缓存数据

---------- 在线体验 ---------- 查看源码 ----------

npm.io

5. 【满屏加载与锁定滑动】演示自动满屏加载,可临时锁定上拉刷新和下拉加载

---------- 在线体验 ---------- 查看源码 ----------

npm.io

6. 【mescroll所有配置项】源码展示mescroll所有配置项, 快速理解与调试mescroll

---------- 在线体验 ---------- 查看源码 ----------

npm.io

中级案例 intermediate demos :

前往官网查看 >>

1. 【知乎 v3.53.0】APP的下拉刷新上拉加载

---------- 在线体验 ---------- 查看源码 ----------

npm.io

2. 【新浪微博 v7.6.1】APP的下拉刷新上拉加载

---------- 在线体验 ---------- 查看源码 ----------

npm.io

3. 【贝贝 v6.0.0】APP的下拉刷新上拉加载

---------- 在线体验 ---------- 查看源码 ----------

npm.io

4. 【雅布力 v2.4.0】APP的下拉刷新上拉加载

---------- 在线体验 ---------- 查看源码 ----------

npm.io

5. 【吸顶悬浮效果】

---------- 在线体验 ---------- 查看源码 ----------

npm.io

6. 【关键词搜索】

---------- 在线体验 ---------- 查看源码 ----------

npm.io

7. 【轮播切换效果】

---------- 在线体验 ---------- 查看源码 ----------

npm.io

8. 【轮播导航菜单】

---------- 在线体验 ---------- 查看源码 ----------

npm.io

高级案例 senior demos :

前往官网查看 >>

1. 【淘宝 v6.8.0】APP的下拉刷新上拉加载

npm.io

2. 【京东 v6.1.0】APP的下拉刷新上拉加载

npm.io

3. 【美团 v8.2.3】APP的下拉刷新上拉加载

npm.io

4. 【美囤妈妈 v2.0.5】APP的下拉刷新上拉加载

npm.io

下载基础中级案例源码 :

获取高级案例源码 :

npm.io

npm.io

vuemescrollvue组件下拉刷新上拉加载
@infinitebrahmanuniverse/nolb-vue-me@everything-registry/sub-chunk-3086
0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago