mescroll.js上拉加载下拉刷新组件使用详解


Posted in Javascript onNovember 13, 2017

本文实例为大家分享了上拉加载下拉刷新组件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={ 
      datas:[], 
      total:0, 
    } 
    this.test = this.test.bind(this); 
  } 
  componentDidMount(){ 
    document.ondragstart=function() {return false;} 
    let ctx = this; 
    var mescroll = new MeScroll ( "mescroll" , {down : { use:false}, up : { 
      use:true, 
      auto:true, 
      offSet:100, 
      page:{ 
        num:0, 
        size:20, 
        time:null 
      }, 
      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.size; 
    let ctx = this; 
    fetch(url,{ 
      method:'GET', 
      headers: { 
        'Accept': 'application/json', 
        'Content-Type': 'application/json', 
      }, 
    }).then((resp)=>{ 
      if(resp){ 
        return resp.json(); 
      }else{ 
        return false; 
      } 
    }) 
    .then((json)=>{ 
        ctx.setState({ 
        datas:ctx.state.datas.concat(json.info), 
        total:json.total 
      },()=>{ 
    }) 
 
    mescroll.endSuccess(); 
    return true; 
  }); 
  } 
  render() { 
    return ( 
      <div id="mescroll" className="mescroll" style={{height: "500px",overflow: "auto"}}> 
      {this.state.datas.map((item,index)=>( 
        <div key={index}> 
          {item.id} 
        </div> 
      ))} 
      </div> 
  ); 
  }} 
 
export default StretchingUp;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件开发方法(初学者)
Feb 03 Javascript
常规表格多表头查询示例
Feb 21 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue.js用法详解
Nov 13 #Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 #Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 #Javascript
vue 挂载路由到头部导航的方法
Nov 13 #Javascript
详解Vuex管理登录状态
Nov 13 #Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 #Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 #Javascript
You might like
一个简易需要注册的留言版程序
2006/10/09 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
python编码最佳实践之总结
2016/02/14 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python手机号码归属地查询代码
2016/05/04 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
python的依赖管理的实现
2019/05/14 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
利用Python实现kNN算法的代码
2019/08/16 Python
python动态规划算法实例详解
2020/11/22 Python
基于Python实现粒子滤波效果
2020/12/01 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
十一个高级MySql面试题
2014/10/06 面试题
会议开场欢迎词
2014/01/15 职场文书
护士毕业实习感言
2014/03/05 职场文书
小学六年级学生评语
2014/04/22 职场文书
音乐节策划方案
2014/06/09 职场文书
长城导游词
2015/01/30 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书