微信小程序Loading加载+提示框（微信小程序）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序Loading加载+提示框（微信小程序）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果演示

1.Loading加载界面

微信小程序 loading,微信小程序,微信小程序,小程序

2.提示框

微信小程序 loading,微信小程序,微信小程序,小程序

代码实现

1.Loading加载界面----方法1

应用场景：显示loading -> 你要做的事 -> 隐藏loading，缓解用户焦虑

//显示加载界面
wx.showLoading({  // 显示加载中loading效果 
    title: "加载中",
    mask: true  //开启蒙版遮罩
  });
  
//你要做的事...

//隐藏加载界面
wx.hideLoading();

2.Loading加载界面----方法2

应用场景：单纯显示loading界面，自定义延时时间，比较鸡肋

//显示加载界面
wx.showToast({  // 显示加载中loading效果2秒
    title: '加载中',
    icon: 'loading',
    duration: 2000    //提示的延迟时间
  });

3.提示框

/* icon可接受的值
success	   ---显示成功图标
error	   ---显示失败图标
loading	   ---显示加载图标
none	   ---不显示图标
*/
wx.showToast({
   title: '提交成功',
   icon: 'success',
   duration: 2000    //提示的延迟时间
 });

wx.showToast({
   title: '提交失败',
   icon: 'error',
   duration: 2000    //提示的延迟时间
 });

赠品

按钮样式喜欢的可以搬走！🤭(●’◡’●)`文章来源地址https://www.toymoban.com/news/detail-517147.html

/*保存按钮*/
.baseinfo-button{
  display: flex;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin-top: 80rpx;
  border-radius: 50rpx;
  width: 80vw !important;
  height: 80rpx !important;
  font-weight: 400;
  background-color: rgb(36, 202, 169);
}