微信小程序 loading（加载中提示框）实例

下面我将详细讲解“微信小程序 loading（加载中提示框）实例”的完整攻略。

1. 标准的加载中提示框实现

在微信小程序中，我们可以通过wx.showLoading()函数来实现标准的加载中提示框。具体代码如下：

wx.showLoading({
  title: "加载中"
});

// 这里是异步操作
setTimeout(function() {
  wx.hideLoading();
}, 2000);

上面的代码中，我们使用wx.showLoading()函数来显示加载中提示框，title参数表示标题，我们设置为“加载中”；然后使用setTimeout()函数来模拟异步操作，2秒后调用wx.hideLoading()函数来隐藏加载中提示框。

2. 自定义加载中提示框实现

除了使用标准的加载中提示框，我们也可以自定义加载中提示框。具体实现步骤如下：

1. 在WXML文件中定义加载中提示框的样式：

<view class="loading-mask" wx:if="{{loading}}">
  <view class="loading-box">
    <image src="/images/loading.gif" class="loading-icon"></image>
    <text class="loading-text">{{loadingText}}</text>
  </view>
</view>

1. 在JS文件中定义显示/隐藏加载中提示框的函数：

// 显示加载中提示框
showLoading: function(loadingText) {
  this.setData({
    loading: true,
    loadingText: loadingText
  });
},

// 隐藏加载中提示框
hideLoading: function() {
  this.setData({
    loading: false
  });
}

1. 在CSS文件中定义加载中提示框的样式：

.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 4rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.loading-icon {
  width: 80rpx;
  height: 80rpx;
}

.loading-text {
  font-size: 30rpx;
  color: #666;
  margin-top: 20rpx;
}

通过以上步骤，我们就可以自定义加载中提示框了。接下来我们使用一个简单的实例来演示自定义加载中提示框如何使用。

Page({
  data: {
    loading: false,
    loadingText: ""
  },

  onLoad: function() {
    this.showLoading("加载中，请稍后...");
    setTimeout(function() {
      this.hideLoading();
    }.bind(this), 2000);
  },

  showLoading: function(loadingText) {
    this.setData({
      loading: true,
      loadingText: loadingText
    });
  },

  hideLoading: function() {
    this.setData({
      loading: false
    });
  }
});

在这个实例中，我们在页面的onLoad()函数中调用showLoading()函数，传入参数“加载中，请稍后...”来显示自定义的加载中提示框，然后使用setTimeout()函数来模拟异步操作，2秒后调用hideLoading()函数来隐藏加载中提示框。

这样，我们就成功实现了自定义加载中提示框的功能。