mescroll / mescroll Goto Github PK

View Code? Open in Web Editor NEW

4.3K 68.0 904.0 12.12 MB

精致的下拉刷新和上拉加载 js框架.支持vue,完美运行于移动端和主流PC浏览器 (JS framework for pull-refresh and pull-up-loading)

Home Page: http://www.mescroll.com

License: MIT License

JavaScript 18.74% CSS 2.43% Vue 56.48% HTML 22.35%

html5 css3 javascript js-framework pull-refresh pull-up-loading iscroll vue bounce nobounce

mescroll's Introduction

mescroll

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

http://www.mescroll.com

主流APP案例, 丰富经典, 随心定制, 轻松拓展
自由灵活的api, 超详细的注释, 可让您快速自定义真正属于自己的下拉上拉组件

功能亮点 :

自动判断和提示列表无任何数据或无更多数据
无需手动判断处理列表的页码,时间等变量
支持监听列表滚动事件,可平滑滚动到任何位置
一个界面可支持多个实例对象,互不干扰
可临时锁定下拉刷新和上拉加载
支持图片懒加载,可配置各种占位图与显示动画,上手超简单

mescroll.js :

mescroll.js是原生js写的下拉刷新和上拉加载. 支持vue, 不依赖jquery, zepto
一套代码多端运行. 完美支持android, iOS, 各手机浏览器, 兼容PC主流浏览器
快速入门, 经典案例, 接口文档, 请移步至官网 http://www.mescroll.com/api.html
mescroll的vue版本已整理, 但react和angular版本还没有, 期待哪位好心的神仙能pull requests~

mescroll-uni :

mescroll-uni 是用在uni-app的下拉刷新和上拉加载的组件
支持一套代码编译到iOS、Android、H5、小程序等多个平台
采用uni官方推荐的自定义组件模式, 实现了更高性能及更多Vue语法支持
继承了mescroll.js的实用功能: 自动处理分页, 自动控制无数据, 空布局提示, 回到顶部按钮 ..
快速入门, 经典案例, 接口文档, 请移步至官网 http://www.mescroll.com/uni.html

mescroll's People

Contributors

Stargazers

Watchers

Forkers

ssmy-sunshine web-tiny frankhan allycs weiya89 wsniper lxiaoyi xielingxiao dwanghua dyq086 vigo2013 han-jun libraameng zhuqi0214 binggana bbgithub xiaoyu-edu fishchan nim888 plincc libin1991 liaohongze lpflpf 775203629 zhongxiaopang dhj2020 bmkj zhangliguo0406 wangxiansheng1 weblx gangyhu huangmuqing yanwenxi minminvan yl0124 benny1311 wanlixi laibaogo guoqiang7721 dulumao elingembkq222 lilujiong nassicy hsinky kingthewin chengpeixin wuxiashuangji johnscliang wangruifeng961221 nick2834 shaisxx bihongcha leecharted mrzhaohz princessjoanna yisibugua chrissong426 lxjx 958037032 cxylys luchanan bsyslient joyoduan mrriven levenli yuexingguang tiantianliu singod higyon coderlynn dachengzi000 ruanzhixiong shimengyu-o barryyang1119 adleytales liusunshine lovedd lixinmusic wjeek dzlishen tianminggh zishuaihub wuyuweixin lee66 stragiht p0nley wsh0521 webdq henry881126 gumx-f hellowolrds centeryuhao morigirl 313392073 across-travel lingsifeng oimmc kevin-penn sfasflj dorisgirl

mescroll's Issues

官网案例在IOS微信下下拉背景异常

非常感谢作者，目前接触下来只有该控件在Android下能流畅使用。目前市面上大部分都是整个div拖动，在低端Android很卡，且每次高度变动需要手动重置计算高度，在某些场景下显得力不从心。该控件完美解决了这个问题，但在IOS下也发现了一点不足，如图：

估计是触发了 webview 的 bounces,不知作者能否完善该问题？
另建议能否将该控件托管给npm,方便插件后续升级。

上拉之后页面不能滚动

必现：移动端和PC端，上拉->松手->继续滑动页面时页面卡住不可滑动，不操作大约几百毫秒后页面才恢复。

从列表页到详情页，怎么从详情页返回列表时定位到点击的那条数据

现在手机端和PC端都需要这个功能，发现从详情页返回的时候列表刷新了无法定位到点击的那条数据，有什么比较好的方法吗？谢谢

上拉加载更多的成功或者失败能否有回弹的效果，类似下拉刷新成功之后的回弹

场景：
假设现在第一次加载10条数据成功，再次上拉，第二次上拉加载失败，调用mescroll.endErr()，此时listview的底部会有空白（就是class为mescroll-upwarp的div被隐藏造成的），那么此时再次向下拉，是不会触发上拉加载的回调。反而下拉会触发上拉加载的回调（optUp中的offset使用的是默认的100）。会让人造成误解，明明是下拉，反而是触发加载更多回调。
所以能不能让上拉加载成功或者失败，都有回弹效果，或者让listview向上滚动class为mescroll-upwarp的div的高度。
很感谢你分享这个plugin，赞赞赞。

多个菜单之间来回切换时，滚动页会卡死，需要等待一段时间才能正常滑动？

点击tab页时，控制台报错

点击tab菜单，如果没有数据；会一直显示正在加载数据，控制台报错mescroll.endSuccess(result.length);
result为unidentified；有数据则不会

如何处理下拉刷新数据加载

问题描述：如何处理【下拉刷新的时候，如果数据没有更改，则不清空数据】
//TODO 在清除第一页数据的时候判断是否是原有数据更改。如果数据有变化则下拉刷新重置页码为第一页，否则只执行动画刷新效果【不执行AJAX请求数据】；

以下为源码：采用的JS是 mescroll-for-muiscroll.js
if(pageNum == 1) this.clearDataList(); //如果是第一页,自动清空第一页列表数据

/*回调成功
*结束下拉刷新 meScroll.endSuccess();无参;
*结束上拉加载 meScroll.endSuccess(dataSize, systime); 必须传dataSize:联网获取到的数据条数;用于判断列表是否还有数据.如果不传则仅隐藏加载中的状态; systime:第一页的系统时间 (可空)
*/
MeScroll.prototype.endSuccess = function(dataSize, systime) {
//结束下拉刷新
if(this.isDownScrolling) this.endDownScroll();

//结束上拉加载
if(this.optUp.use) {
	var pageNum = this.optUp.page.num; //当前页码
	var pageSize = this.optUp.page.size; //每页长度
		//TODO 在清除第一页数据的时候判断 是否是原有数据更改。如果数据有变化则下拉刷新重置页码
	if(pageNum == 1) this.clearDataList(); //如果是第一页,自动清空第一页列表数据
	
	var isShowNoMore; //是否已无更多数据
	if(dataSize != null) {
		if(dataSize < pageSize) {
			//返回的数据不满一页时,则说明已无更多数据
			this.optUp.isLock = true;
			if(dataSize == 0 && pageNum == 1) {
				//如果第一页无任何数据且配置了空布局
				isShowNoMore = false;
				this.showEmpty();
			} else {
				//总列表数少于配置的数量,则不显示无更多数据
				var allDataSize = (pageNum - 1) * pageSize + dataSize;
				if(allDataSize < this.optUp.noMoreSize) {
					isShowNoMore = false;
				} else {
					isShowNoMore = true;
				}
				this.removeEmpty(); //移除空布局
			}
		} else {
			//还有下一页
			isShowNoMore = false;
			this.optUp.isLock = false;
			this.removeEmpty(); //移除空布局
		}
	}

	//设置加载列表数据第一页的时间
	if(pageNum == 1 && systime) this.optUp.page.time = systime;

	//隐藏上拉
	this.endUpScroll(isShowNoMore);

	//检查是否满屏自动加载下一页
	this.loadFull();
}

}

demo疑问

如果所示，如果我每次请求接口返回的是某个页面的数据，不是直接加到一个数组中就行了嘛？
这里pageNum不是请求页的数字吗还是到此为止所有的页的数，不太明白。

能否只保留几页数据？

手机上无限滚动到很多页后，由于内存占用会很卡，速度很慢，请问有没有提供只保留几页数据在浏览器上的方法呢？

请问对id:mescroll类的样式有什么限制吗

设置为这样时会还没l上拉呢就自动请求完了所有数据。

在我自己写的另一个demo里连下拉效果都没有。

数据初始化成功,上拉事件未触发

mounted : function(){
this.getList();
},
methods: {
getList(){
// 上拉加载
this.mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
up: {
callback: this.upCallback, //上拉回调
empty:{
warpId:"dataList",
icon : "../res/img/mescroll-empty.png" ,
tip : "亲,暂无相关数据哦~" ,
}
}
})
document.getElementById("dataList").style.display="block";
},
//上拉加载的回调 page = {num:1, size:10}; num:当前页从1开始, size:每页数据条数
upCallback(page) {
console.log('kaishi')
var pageIndex = page.num-1;
//联网加载数据
var self = this;
this.getListDataFromNet(pageIndex, page.size, function(curPageData) {
//如果是第一页需手动制空列表
if(page.num == 1) self.pdlist = [];
//更新列表数据
self.pdlist = self.pdlist.concat(curPageData);
}, function() {
self.mescroll.endErr();
});
},
getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
console.log(pageNum*pageSize)
this.prames.page=pageNum
SerachOrder.condition({params: this.prames})
.then((response) => {
var data=response.content;
var total=response.total;
var listData=[];
console.log(total)
for (var i = (pageNum)*pageSize; i < (pageNum+1)*pageSize; i++) {
if(i==total) break;
listData.push(data[i]);
}
successCallback&&successCallback(listData);//成功回调
}, (response) => {
console.log('fail')
})
}
}

mescroll初始化之后，在不重新初始化的基础上能再次修改“下拉刷新”等提示文字吗？

场景：
在A页面，已经初始化了mescroll，“上拉刷新”等等文字设置为中文。现在在A页面有一个切换语言的按钮，按下之后，“上拉刷新”等提醒文字就应该改为英文，请问：在不要重新初始化mescroll的基础上，要怎么修改这些提示文字？有这样的api接口吗？

为什么我down callback的第一个参数有问题？

up的callback的参数是正常的：{num: 1, size: 10, time: null}
down的callback参数是却是:

a {scrollDom: div#mescroll.mescroll, options: {…}, isDownScrolling: false, isUpScrolling: false, optDown: {…}, …}

完整代码如下:

var mescroll = new MeScroll("mescroll", {
            up: {
                use: false,
            },
            down: {
                use: true,
                auto: true,
                callback: function(page) {
                    console.log(page);
                },
                page: {
                    num: 0,
                    size: 5,
                    time: null
                },
                htmlNodata: '<p class="upwarp-nodata">拉到底了~别拉了~卧槽！</p>'
            }
        });

关于事件绑定问题

在首次加载数据后,点击事件可以执行

$('#dataList0').on('click', '.add', function(){
    var a = $(this).data('productid');
    console.log(a);
})

加载一次分页后,点击则不生效了

minAngle设置异常

V1.2.3中设置minAngle：90并非垂直时才刷新，目前是约80-90这个区间就执行刷新了
但当设置大于90时，是可以的，但是下拉时文字消失不见
代码详见 #44

请问这个插件是什么协议？

能够免费用于商业项目么?

无法触发上拉加载？

按照 ‘mescroll所有配置项‘ demo进行初始化，可以触发下拉刷新，但是无法触发上拉加载，页面滚动时不能进入scroll事件，使用Vue框架，求提供一个思路

求教如何重新初始化

var mescroll = new MeScroll(。。。）
之后如何重新init？

安卓原生浏览器不支持该插件

在手机端使用UC浏览器，显示正常，使用原生安卓浏览器显示一片空白

這能用在vue上嗎

简单易用

简单易用，真的很棒！

下拉动画都有点卡

能把下拉动画改成 transform 的动画吗，这样就流畅些

下拉刷新背景在小米手机上显示不正常

在小米上下拉刷新的时候背景不会更新，必须手离开屏幕后才会恢复正常

如图

正常应该是这样的

Uncaught TypeError: Cannot read property 'endBySize' of undefined

RT.
相关代码:

function getListData(page) {
            var dataIndex = curNavIndex;
            getListDataFromNet(dataIndex, page.num, page.size, function (pageData, totalSize) {
                console.log(pageData);
                console.log(totalSize);
                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
                mescrollArr[dataIndex].endBySize(pageData.length, totalSize)

                //设置列表数据
                setListData(pageData, dataIndex);
            }, function(){
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                mescrollArr[dataIndex].endErr();
            });
        }