风清月

mui上拉加载的坑

电脑版发表于:2019/11/15 9:21


首先是和vue.js结合起来用容易出现的坑:

http://www.tnblog.net/aojiancc/article/details/2838


要注意html结构:

这两个样式: mui-scroll-wrapper,mui-scroll

<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--数据列表-->
    <ul class="mui-table-view mui-table-view-chevron">
      
    </ul>
  </div>
</div>


上拉加载的参数分析

mui.init({
	pullRefresh: {
		container: '#articlecontent', //待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
		up: {
			auto: false, //可选,默认false.自动上拉加载一次
			contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容
			contentnomore: '没有更多数据了', //可选,请求完毕若没有更多数据时显示的提醒内容;
			callback: loadmore //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
		}
	}
});

auto: false是否默认加载一次,为true的话就会自动执行一次callback,如果想加载数据都在callback中的话就可以这样写,

如果不想一来就加载一次就设置成false即可


callback中的endPullupToRefresh问题,这个表示有没有更多数据了,一定要写不然不会返回数据的



关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢