小程序showLoading:网络请求前显示“加载中...”,请求完成时关闭加载中

showLoading加载中提示框显示,以及消除提示框

wx.showLoading({
  title: '加载中...',
})


wx.request({
  url: '',
  success(res){},
  fail(){},
//添加wx.hideLoading()一定要添加到complete里
  complete(){
    wx.hideLoading()
  }
})

开发项目截图

如果不做showLoading处理,在请求修改数据的接口的时候。可能会出现多次请求,如果后台没做限制就会造成多条重复数据;如果后台做了限制也可能存在并发问题,所以前端需要加showLoading做限制

  • 7
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解释这段代码getSubCate: function() { var that = this api.get(category, { catId: that.data.cateId }).then(res => { that.setData({ subCate: res.Data }) }) }, categohref: function() { if (this.data.produList.length) { wx.navigateTo({ url: '/pages/subcategory/subcategory?id=' + this.data.cateId + '&subid=' + this.data.produList[0].Id, }) } }, switchRightTab: function(e) { let index = parseInt(e.target.dataset.index); let catId = e.target.dataset.cateid let cateName = e.target.dataset.name this.setData({ curIndex: index, cateId: catId, produList: [], subCate: [], page: 1, reTurn: false, num: 0, orderBy: 0, cateName: cateName }) this.getProduct() this.getSubCate() }, search: function(e) { var that = this this.setData({ Qvaule: e.detail.value, searpage: 1, searclosebtn: true }) wx.showNavigationBarLoading() api.get(search, { q: that.data.Qvaule, page: that.data.searpage }).then(res => { that.setData({ searchContent: res.Data.Items, searchPage: true }) wx.hideNavigationBarLoading() }) }, getProduct: function() { var that = this if (this.data.reTurn) { return } wx.showLoading({ title: '加载...', mask: true }) api.get(searCate, { cid: that.data.cateId, page: that.data.page }).then(res => { var showMore = (that.data.produList.concat(res.Data.Items).length + that.data.subCate.length) >= 12; that.setData({ produList: that.data.produList.concat(res.Data.Items), showMore: showMore?true:false }) wx.hideLoading() }) }, lower: function(e) { this.setData({ page: this.data.page + 1 }) this.getProduct() },
06-08
这段代码是一个小程序的一些函数,主要是用来实现商品分类、搜索和商品列表展示等功能。 1. `getSubCate: function() { ... }` 函数用于获取当分类的子分类信息。它向服务器发送一个 GET 请求请求地址为 `category`,请求参数为 `{ catId: that.data.cateId }`,其 `that.data.cateId` 表示当分类的 ID。当请求成功后,它会将返回的数据更新到 `subCate` 变量。 2. `categohref: function() { ... }` 函数用于跳转到当分类的第一个子分类页面。它首先检查当分类下是否有商品,如果有,则跳转到第一个子分类页面,否则不做任何操作。 3. `switchRightTab: function(e) { ... }` 函数用于切换商品分类。它会更新当分类的 ID、名称、页码等信息,并调用 `getProduct()` 和 `getSubCate()` 函数来获取商品列表和子分类信息。 4. `search: function(e) { ... }` 函数用于根据关键字搜索商品。它会将搜索关键字更新到 `Qvaule` 变量,并向服务器发送一个 GET 请求请求地址为 `search`,请求参数为 `{ q: that.data.Qvaule, page: that.data.searpage }`,其 `that.data.Qvaule` 表示搜索关键字,`that.data.searpage` 表示搜索结果的页码。当请求成功后,它会将返回的数据更新到 `searchContent` 变量。 5. `getProduct: function() { ... }` 函数用于获取当分类下的商品列表。它向服务器发送一个 GET 请求请求地址为 `searCate`,请求参数为 `{ cid: that.data.cateId, page: that.data.page }`,其 `that.data.cateId` 表示当分类的 ID,`that.data.page` 表示商品列表的页码。当请求成功后,它会将返回的商品列表数据更新到 `produList` 变量,并根据当列表长度和子分类数量判断是否显示“查看更多”按钮。 6. `lower: function(e) { ... }` 函数用于实现“查看更多”功能。当用户滑动到页面底部,它会将页码加一,并调用 `getProduct()` 函数来获取更多的商品列表数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值