美文网首页WebUI/插件库
移动下拉插件:mescroll

移动下拉插件:mescroll

作者: CodeMT | 来源:发表于2020-05-19 14:44 被阅读0次

官网:http://www.mescroll.com/
GitHub:https://github.com/mescroll/mescroll

mescroll只能用来实现移动端页面上拉刷新, 下拉加载等功能

1. 使用mescroll实现下拉滑动的效果: (仅仅效果, 有的页面不需要刷新数据, 只要你能下拉就行)

代码如下:

var mescroll = new MeScroll('mescroll', {
  up: {
    use: false // 不配置上拉 
  },
  down: {
    auto: false, 
    htmlContent: ' ', // 下拉内容设为空
    callback: function(ms) {
      console.log('down');
      ms.endByPage(0, 0); // mescroll.endError() 效果一样//回掉为空, 结束页为空
    }
  }
});

2. 案列2: 使用上拉刷新功能, 下拉只提供效果

var mescroll = new MeScroll('mescroll', {
  up: {
    noMoreSize: 1,
    htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>',
    htmlNodata: '<p class="upwarp-nodata">-- 没有数据啦 --</p>',
    callback: function(page, ms) {
      console.log('up'); // 业务代码部分
      $scope.search($scope.condition, ms);
    }
  },
  down: {
    auto: false,
    htmlContent: ' ',
    callback: function(ms) {
      console.log('down');
      mescroll.endErr(); // 使用endError把下拉的效果关闭(内容回到原位), mescroll内部会自动恢复原来的页码,时间等变量
    }
  }
});

3. 使用上拉加载, 下拉重置刷新的功能:

var mescroll = new MeScroll('mescroll', {
  up: {
    // 只需要配置上拉刷新部分, mescrol会默认开启下拉刷新,并重置当前页为第一页,然后调用  
    up.callback()
    noMoreSize: 1,
    htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>',
    htmlNodata: '<p class="upwarp-nodata">-- 没有数据啦 --</p>',
    page: { 
      // 要使用它提供的分页参数, 把分页功能托管给他
      num : 0,
      size : $scope.pageInfos.size,
      time: null
    },
    // 获取回掉里的分页和mescroll实例
    callback: function(page, ms) { 
      $scope.loadUncommitIssues(page, ms); // 传递分页对象和mescroll实例,进行业务代码操作
    }
  }
});  

相关文章

网友评论

    本文标题:移动下拉插件:mescroll

    本文链接:https://www.haomeiwen.com/subject/oekbohtx.html