mescroll.js上拉加载下拉刷新组件使用详解_Javascript教程-织梦者
当前位置:&>&&>& > mescroll.js上拉加载下拉刷新组件使用详解
mescroll.js上拉加载下拉刷新组件使用详解
本文将为关注织梦者的朋友提供的是的mescroll.js上拉加载下拉刷新组件使用详解相关教程，具体实例代码请看下文:本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码，供大家参考，具体内容如下
附上链接地址http://www.mescroll.com/api.html#NPM，手机端和都能够使用，唯一推荐；
使用过程中要注意这些问题http://www.mescroll.com/qa.html；
使用注意事项：
1、引入的时候出问题及时看官方给出的解决方案(基本上都必须看)；
2、react中一定要在dom渲染之后的方法（didMount）中初始化，因为这个需要拿到dom对象；
3、在react工程中，回调的数据一定要拼接，这是要注意的（datas:ctx.state.datas.concat(json.info)）；
4、很坑需要单页的里的html和body高度设置100%。
下边附上简易代码
import React, { Component, PropTypes } from 'react';
import MeScroll from "mescroll.js"
class StretchingUp extends Component {
constructor(props, context) {
super(props, context);
this.state={
this.test = this.test.bind(this);
componentDidMount(){
document.ondragstart=function() {}
var mescroll = new MeScroll ( "mescroll" , {down : { use:false}, up : {
auto:true,
offSet:100,
onScroll:function(mescroll, y, isUp){
callback:function (page, mescroll) {
ctx.test(page, mescroll);
error: function (e) {
mescroll.resetUpScroll()
test(page, mescroll){
console.log(page)
let url = "http://localhost:5577/curpage/"+page.num+"/pagesize/"+page.
fetch(url,{
method:'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}).then((resp)=&{
return resp.json();
.then((json)=&{
ctx.setState({
datas:ctx.state.datas.concat(json.info),
total:json.total
mescroll.endSuccess();
render() {
&div id="mescroll" className="mescroll" style={{height: "500px",overflow: "auto"}}&
{this.state.datas.map((item,index)=&(
&div key={index}&
export default StretchingUp;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持织梦者。
多多关注织梦者，我们将为您收集更多的javascript相关文章.
这些内容可能对你也有帮助
更多可查看Javascript教程列表页。
猜您也会喜欢这些文章使用dropload实现上拉刷新
我使用的是dropload插件，遇到的问题是需要滑动两次，才能看到页面更新。
请问各位前辈有什么决绝办法？
你们怎么实现上拉加载更多。
&div class="container"&
&div class="lists"&
&!--使用js添加的列表--&
&div class="container"&
&div class="lists"&
&!--使用js添加的列表--&
//下拉刷新，上拉加载更多
JavaScript
$('.container').dropload({
scrollArea : window,
loadDownFn : function(me){
console.log("我是新内容");
me.resetload();
12345678910111213
$('.container').dropload({&
scrollArea : window,&
loadDownFn : function(me){&
console.log("我是新内容");&
me.resetload();&
我省略了一些代码！
使用心得体会，再次封装，使用更简洁，
关于伯乐小组
这里有好的话题，有启发的回复和值得信任的圈子。
新浪微博：
推荐微信号
（加好友请注明来意）
- 好的话题、有启发的回复、值得信赖的圈子
- 分享和发现有价值的内容与观点
- 为IT单身男女服务的征婚传播平台
- 优秀的工具资源导航
- 翻译传播优秀的外文文章
- 国内外的精选博客文章
- UI,网页，交互和用户体验
- 专注iOS技术分享
- 专注Android技术分享
- JavaScript, HTML5, CSS
- 专注Java技术分享
- 专注Python技术分享
& 2018 伯乐在线Iscroll4 实现下拉刷新，上拉加载，现在出现一个问题，就是当我在下拉刷新的同时，马上进行上拉_百度知道
Iscroll4 实现下拉刷新，上拉加载，现在出现一个问题，就是当我在下拉刷新的同时，马上进行上拉
Iscroll4 实现下拉刷新，上拉加载，现在出现一个问题，就是当我在下拉刷新的同时，马上进行上拉加载，页面会出现两条相同的数据，怎么解决？
我有更好的答案
1、在options中加入如下参数代码（我的代码是在2470行）：//原本就有的部分HWCompositing: true,useTransition: true,useTransform: true,//我加入的部分minScrollY : 0,minScrollX : 02、在下面不远处（十行以内）加入如下参数：//新加部分this.minScrollY = this.options.minScrollY;this.minScrollX = this.options.minScrollX;原先就有的部分this.translateZ = this.options.HWCompositing && utils.hasPerspective ? ' translateZ(0)' : '';3、最后一处修改，在resetPosition方法内，此处直接贴上更改之后的方法，其实真正的修改只是将this.minScrollX修改成了（代码在2830行左右）:resetPosition: function (time) {
var x = this.x,
y = this.y;
time = time || 0;
if ( !this.hasHorizontalScroll || this.x & this.minScrollX ) {
x = this.minScrollX;
} else if ( this.x & this.maxScrollX ) {
x = this.maxScrollX;
if ( !this.hasVerticalScroll || this.y & this.minScrollY ) {
y = this.minScrollY;
} else if ( this.y & this.maxScrollY ) {
y = this.maxScrollY;
if ( x == this.x && y == this.y ) {
this.scrollTo(x, y, time, this.options.bounceEasing); },全部修改内容如上，调用的时候，只需要传入minScrollX、minScrollY参数便可实现下拉后回弹上面的预留位置了。注：对于scroll的滚动区域小于包裹容器的，iscroll禁止滚动，会造成无法实现下拉刷新，这里有一个小技巧，就是给滚动区域加一个min-height:101%;最后附上此次修改的dome下载地址，由于dome最初也是从别处拿的（最初的dome不能满足需求），其中的css布局方面个人觉得有些不好，但由于最近工作紧张也没有去改，暂时就先这样吧，有空会优化一下的。
把下拉的判断写在前头，在触发下拉的方法时，把上拉赋的值清空一下就行了pullDownEl = document.getElementById('pullDown');pullDownEl.className = '';
1条折叠回答
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。【工作笔记】使用mescroll.js实现上拉加载更多
原先公众号页面实现加载更多是通过拉到页面底部点击按钮调用ajax获取数据拼接到原数据列下，现在想通过上滑实现，网上搜索了下，发现是比较简单方便的，代码如下：
&%@ include file="/common/taglibs.jsp"%&
&%@ page contentType="text/charset=UTF-8"%&
&!doctype html&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"&
&title&列表&/title&
&link rel="stylesheet" href="${ctx}/mescroll/mescroll.min.css"&
&script type="text/javascript"&
// 进入页面前，后台初始化页码、条数，获取总数据量
// 当前页码
var pageNo = "${pageNo}";
// 每页数据量
var pageSize = "${pageSize}";
// 总数据量
var totalCount = "${totalCount}";
//加载更多
function loadMoreNew(){
var newArr = [];
// 请求后台获取分页数据
type : "POST",
url : ".....",
dataType : "json",
contentType : "application/ charset=utf-8",
async : false,
success : function(data) {
var code = data.
// 得到数据集
var o = data.
var html = "";
// 遍历数据集，放入数组中
for (var i = 0; i & merchants. i++) {
var def = o[i];
html = ".....";
newArr.push(html);
pageNo = pageNo + 1;
error : function(xhr, status) {
// 返回数据
return newA
&div class="page hasheader mescroll" id="mescroll"&
&div id="listDiv" class="weui-cells"&
&script src="${rc.contextPath}/mescroll/mescroll.min.js"&&/script&
&script type="text/javascript" charset="utf-8"&
// 页面加载后，先执行一次
// 以下为mescroll.js中的方法，根据需求作部分调整
$(function(){
//创建MeScroll对象
var mescroll = initMeScroll("mescroll", {
use : false, // 是否启用下拉刷新
auto : false //是否在初始化完毕之后自动执行下拉回调 默认true
auto : true,//初始化完毕,是否自动触发上拉加载的回调
isBoth : true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
callback : upCallback //上拉加载的回调
/*下拉刷新的回调 */
function downCallback(){
/*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
var page = {num : pageNo, size : pageSize};
function upCallback(page){
//联网加载数据
getListDataFromNet(page.num, page.size, function(curPageData){
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length + ", totalCount" + totalCount);
//方法一(推荐): 后台接口有返回列表的总页数 totalPage
//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
mescroll.endBySize(curPageData.length, totalCount); //必传参数(当前页的数据个数, 总数据量)
//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
//mescroll.endSuccess(curPageData.length);
//设置列表数据
setListData(curPageData, true);
}, function(){
//联网失败的回调,隐藏上拉加载的状态
mescroll.endErr();
/*设置列表数据*/
function setListData(curPageData, isAppend) {
for (var i = 0; i & curPageData. i++) {
var newObj = curPageData[i];
$("#listDiv").append(newObj);
/*联网加载列表数据*/
var downIndex=0;
function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
//延时一秒,模拟联网
setTimeout(function () {
var newArr = [];
newArr = loadMoreNew();
successCallback&&successCallback(newArr);
}catch(e){
//联网失败的回调
errorCallback&&errorCallback();
//禁止PC浏览器拖拽图片,避免与下拉刷新冲突;如果仅在移动端使用,可删除此代码
document.ondragstart=function() {}
需要注意的是，js中a.prototype.extendUpScroll方法里设置的noMoreSize初始值为5，需设置为1，这样的话如果数据只有一页且当前页数据在[1，5]之间时，页面底部会显示“-- END -- ”。
更多详细内容请到官方网站中查看文档或参考demo：，
没有更多推荐了，10:43 提问
H5下拉刷新，上拉加载的bug，求大神帮忙解决。
最近在使用mescroll这个下拉刷新，上拉加载组件的时候遇到一个奇怪的问题，在没有数据的时候底部会显示一个没有更多数据的时候页面就划不动了，如下图：
注：到这个暂无更多商家显示出来的时候，页面就划不动了。
点击这个返回顶部按钮之后页面正常滑动，但是知道重新拉到最底部页面还是划不动。
更奇怪的是这个问题在Safari浏览器、QQ自带浏览器会出现这种问题（已知的）
但是微信自带的浏览器就没有任何问题，UC浏览器也没有问题，安卓的试了几款都没有问题，真的是头大，谁遇到过怎么解决的。谢谢
按赞数排序
var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
callback: upCallback , //上拉加载的回调
**isBounce: false //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)**
倒数第三行，看下，这个有没有配置
var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
callback: upCallback , //上拉加载的回调isBounce: false //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
这样写应该是没有问题的
确实没办法换段代码啊
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐