小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> 微信小程序Loading加载+提示框

微信小程序Loading加载+提示框

以下是一个微信小程序Loading加载和提示框的代码示例:



  显示Loading
  显示提示框
 
 

 

  {{toastText}}


// js文件
Page({
  data: {
    isLoading: false,
    isToastHidden: true,
    toastText: ''
  },

  showLoading() {
    this.setData({
      isLoading: true
    })
    setTimeout(() => {
      this.setData({
        isLoading: false
      })
    }, 3000)
  },

  showToast() {
    this.setData({
      isToastHidden: false,
      toastText: '这是一个提示框'
    })
    setTimeout(() => {
      this.setData({
        isToastHidden: true
      })
    }, 2000)
  }
})


/* wxss文件 */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

button {
  margin-bottom: 20px;
}

toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, .7);
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}


我们在wxml文件中定义了两个按钮来分别触发显示Loading和提示框的功能。在js文件中,我们定义了两个函数来控制Loading和提示框的显示和隐藏,并通过setData方法来更新data中的isLoading、isToastHidden和toastText状态。在wxss文件中,我们定义了toast的样式。

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了