上拉加载

mui的上拉加载和下拉刷新类似，都属于pullRefresh插件，使用过程如下：
1.滚动到页面末尾，显示提示“正在加载…”（由mui框架提供）
2.执行并加载业务数据逻辑（由开发人员提供）
3.加载后，隐藏“加载”提示（由mui框架提供）
开发人员只需要关心业务逻辑并加载更多数据。

初始化

初始化方法类似于下拉刷新。mui.init方法中的pullRefresh参数用于配置上拉加载参数，如下所示：

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

端部上拉载荷

加载新数据后，需要执行endPullupToRefresh（）方法来结束雪花进度条的“loading…”进程

nomore
Type: Boolean
是否还有更多数据；若还有更多数据，则传入false; 否则传入true，之后滚动条滚动到底时，将不再显示“上拉显示更多”的提示语，而显示“没有更多数据了”的提示语；

示例：

function pullfresh-function() {
     //业务逻辑代码，比如通过ajax从服务器获取新数据；
     ......
     //注意：
     //1、加载完新数据后，必须执行如下代码，true表示没有更多数据了：
     //2、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
     this.endPullupToRefresh(true|false);
}

重置上拉加载

如果在某些业务中需要重新触发上拉加载（例如，当前类别没有更多数据，但在切换到其他类别后，它应该支持继续上拉加载），则调用。刷新（true）方法重置上拉加载控制，如以下代码所示：

//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数；
//注意：refresh()中需传入true
mui('#pullup-container').pullRefresh().refresh(true);

禁用上拉刷新

在某些情况下，如果要禁用上拉加载，例如，当列表中的数据太少时，不希望显示“更多上拉”和“没有更多数据”的提示。开发人员可以调用disablePullupToRefresh（）方法来实现类似的需求。代码如下：

//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数；
mui('#pullup-container').pullRefresh().disablePullupToRefresh();

启用上拉刷新

使用disablePullupToRefresh（）方法禁用上拉加载后，可以使用enablePullup ToRefresH（）方法再次启用上拉加载。代码如下：

//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数；
mui('#pullup-container').pullRefresh().enablePullupToRefresh();

选项卡更改图标

要更改图标，只需访问梅的官方网站，找到相应的图标库（访问地址：https://dev.dcloud.net.cn/mui/ui/#icon）好的。
注：梅花官方网站上有两种图标库：
一个是默认图标库
一个是扩展的图标库。
这两种用法不同。
个人建议：所有选项卡都使用相同的图标，因为这两个图标的样式有些不同。

<body>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="#tabbar">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-chat">
			<span class="mui-icon mui-icon-email"></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-map">
			<span class="mui-icon mui-icon-list"></span>
			<span class="mui-tab-label">点名</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-contact">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">联系人</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-map">
			<span class="mui-icon mui-icon-paperplane"></span>
			<span class="mui-tab-label">通知</span>
		</a>
	</nav>
</body>

效果如下：
在这里插入图片描述

mui变量和plus变量分别是什么

mui变量和加号变量都在mui核心js中声明。
mui变量中的方法是诸如窗口打开和事件处理等应用程序中的基本方法。它是由dcloud平台生成的。
plus变量是一个类库，它通过js调用webview、camera、本地存储、相册和其他手机本地方法。由HTML5+中国产业联盟统一生产。您必须阅读其文档中的各种变量和方法！

网络请求必须用mui.ajax，调试必须用真机或模拟器

您可能已经习惯了JQuery的 $。 aja x 方法，但必须使用 m u i A ja x ，否则会发生跨域错误。调试时，不要使用 H B u i l d er 的内置浏览器。您必须使用真实机器或模拟器中的 H B u i l d er 基础进行调试，否则您还将报告跨域错误。缪。 aja x 参数与$ 基本相同。ajax参数，它返回XMLHttpRequest对象。
10.清单中的内部版本号。json应该手动更改
版本号有两种类型，一种是应用程序版本名（如1.2），另一种是内部版本号（如65）。应用程序市场使用内部版本号而不是应用程序版本名称来确定APP是否已升级。但是，HBuilder中的版本号不会自动递增，需要手动更改。如果不更改应用程序升级，当它发布到应用程序市场时，会出现奇怪的错误。
打开清单。json，切换到代码视图，然后查找：
在这里插入图片描述
其中，name是应用程序版本的名称，code是内部版本号。每次发布应用程序时，代码值应更改为比上次更大的数字。

本文含有隐藏内容，请开通VIP 后查看

MUI框架的上拉加载的深入探索和实战运用

文章目录

上拉加载

初始化

端部上拉载荷

重置上拉加载

禁用上拉刷新

启用上拉刷新

选项卡更改图标

mui变量和plus变量分别是什么

网络请求必须用mui.ajax，调试必须用真机或模拟器

网站公告

今日签到

热门文章

最新发布