小程序API —— 51小程序界面交互 - loading 提示框

小程序提供了一些用于界面交互的 API,例如 loading 提示框、消息提示框、模态对话框等 API;

loading 提示框常配合网络请求来使用,用于提高用户体验,对应的 API 有两个:

  • wx.showLoading() 显示 loading 提示框;
  • wx.hideLoading() 关闭 loading 提示框;

注意 loading 提示框显示之后不会自动关闭,必须主动调用 hideLoading 方法才能关闭 loading 提示框;

接下来我们使用这两个 API 来实现一个需求:

当用户点击按钮时,小程序会发送请求获取数据,在发送请求过程中需要显示 loading 提示框,同时给用户文字提示;当数据请求完成之后,关闭 loading 提示框;

下面打开微信开发者工具来实现这个需求:

在 pages/cate/cate.js 中添加下面代码:

javascript 复制代码
Page({

  data: {
    list: []
  },
  getData(){

    // 显示 loading 提示框
    wx.showLoading({
      // title 用来显示提示的内容
      // 提示的内容不会自动换行,如果提示的内容比较多,超出行的内容会被隐藏
      title: '数据正在加载中...',
      // 是否展示透明蒙层,防止触摸穿透,true 表示隐藏
      mask: true
    })

    // 发起网络请求,需要使用 wx.request API
    wx.request({
      // 接口地址
      url: 'https://gamll-prod.atguigu.cn/mall-api/index/findBanner',
      // 请求方式
      method: 'GET',
      // 请求参数
      data: {},
      // 请求头
      header: {},
      // API 调用成功以后,执行的回调
      success: (res) => {
        if(res.data.code === 200){
          this.setData({
            list: res.data.data
          })
        }
      },
      // API 调用失败以后,执行的回调
      fail: (err) => {
        console.log(err);
      },
      // API 不管调用成功还是失败,都会执行的回调
      complete: (res) => {
        // console.log(res)

        // 关掉 loading 提示框
        wx.hideLoading()
      }
    })
  }
})

在 pages/cate/cate.wxml 中添加下面代码:

html 复制代码
<button type="warn" bind:tap="getData">获取数据</button>

编译运行, 点击按钮的时候,可以发现出现了 loading 提示框,如下:

参考视频:尚硅谷微信小程序开发教程

相关推荐
鲲鹏猿24 分钟前
微信小程序——早餐小程序
微信小程序·小程序
说私域1 小时前
基于开源AI智能名片链动2+1模式与S2B2C商城小程序的微商品牌规范化运营研究
人工智能·小程序·开源
2501_915909061 小时前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
2501_915106323 小时前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview
paopaokaka_luck8 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
老华带你飞1 天前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽1 天前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
说私域2 天前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往2 天前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw2 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友