微信小程序 loading 详解及实例代码

微信小程序 开发文档，相关文章： 微信小程序  action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 loading 属性名 类型 默认值 说明 hidden Boolean false 是否隐藏 示例代码： <view class=body-view> <loading hidden={{hidden}}> 加载中... </loading> &lt;button type=default bindtap=loadingTap&gt;点击弹出loading&lt;/button&gt; </view> 在微信小程序开发中，`loading`组件是一种非常实用的元素，用于显示页面加载状态或提示用户数据正在处理。本文将详细解析微信小程序`loading`组件的使用方法，并提供实例代码帮助开发者更好地理解和应用。 我们需要了解`loading`组件的基本属性和用法。在微信小程序中，`loading`组件主要包含以下属性： 1. `hidden`：这是一个布尔类型的属性，用来控制`loading`组件的可见性。默认值为`false`，表示`loading`图标会显示在屏幕上。当设置为`true`时，`loading`图标会被隐藏。在示例代码中，我们通过`<loading hidden="{{hidden}}">加载中...</loading>`动态地控制`hidden`属性，从而实现`loading`的显示和隐藏。 2. `type`：虽然在提供的描述和标签中未提及，但微信小程序`loading`组件还允许设置`type`属性，可选值为`default`（默认样式）和`spinner`（自定义样式）。默认情况下，`type`为`default`，显示一个圆形的加载动画。如果需要自定义加载样式，可以设置为`spinner`，并配合`custom-style`属性进行样式调整。 接下来，我们分析一下提供的实例代码： ```html <view class="body-view"> <loading hidden="{{hidden}}">加载中...</loading> <button type="default" bindtap="loadingTap">点击弹出loading</button> </view> ``` 这个例子中，`<view>`作为容器，包含了`<loading>`组件和一个按钮。当用户点击按钮时，会触发`loadingTap`事件，从而改变`hidden`数据的值，展示或隐藏`loading`组件。 ```javascript Page({ data: { hidden: true }, loadingTap: function() { this.setData({ hidden: false }); var that = this; setTimeout(function() { that.setData({ hidden: true }); that.update(); }, 3000); } }) ``` 在`Page`的`data`对象中，`hidden`初始值设为`true`，这意味着`loading`在页面初次加载时是隐藏的。`loadingTap`函数是绑定在按钮上的点击事件，当用户点击按钮时，`hidden`的值被设置为`false`，显示`loading`。同时，为了模拟实际加载过程，我们使用`setTimeout`在3秒后恢复`hidden`为`true`，隐藏`loading`，并调用`update`方法更新界面状态。 微信小程序的`loading`组件不仅可以用在页面级加载，还可以用在列表数据逐条加载、异步操作等待等场景。通过结合`wx.showLoading`和`wx.hideLoading`全局API，可以在不需要`loading`组件的情况下实现全屏加载提示。 总结来说，微信小程序中的`loading`组件是处理数据加载状态的重要工具，它提供了方便的控制属性以及与业务逻辑交互的能力，使得开发者能轻松地创建出用户体验良好的应用程序。在实际开发中，可以根据项目需求灵活运用`loading`组件，提升用户的使用体验。