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中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
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数组中的重复值的实现代码
2011/07/17 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
python遍历数组的方法小结
2015/04/30 Python
python实现bucket排序算法实例分析
2015/05/04 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
学习十八大报告感言
2014/02/28 职场文书
大学班级计划书
2014/04/29 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
2015年招生工作总结
2015/05/04 职场文书
工资证明格式模板
2015/06/12 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书