小程序防抖功能以及wx:for的使用

防抖功能:
微信小程序的防抖功能主要是为了避免重复发送请求的这种情况发送，主要原理就是利用定时器来阻止重复发送请求！
首先要在页面对应的js中加入变量TimeNum = -1；

TimeNum = -1

\然后设置一个定时器，在定时器内部发送请求！我这里的是每隔一秒发送一次！

this.TimeNum =setTimeout(()=>{const req = await request({url:…….});//发送请求
},1000)；

然后就是发送完成，清除定时器
clearTimeout(this.TimeNum);
wx:for的使用:

<navigator class="first_item" wx:for="{{goodsList}}"
wx:for-index="index" wx:key="goods_id"
url="/pages/goods_detail/goods_detail?goods_id={{item.goods_id}}"><!-- 左边图片容器 --><view class="good_img_wrap"><image mode="widthFix" src="{{item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'}}"/></view><!-- 右边商品容器 --><view class="good_info_wrap"><view class="good_name">{{item.goods_name}}</view><view class="good_price">￥ {{item.goods_price}}</view></view></navigator>

然后就是就是js里面的方法了

wx.request({url:"/goods/search"data: QueryParams,url:base_url+params.url,success:(result)=>{this.setData({// 拼接两个数组goodsList:[...this.data.goodsList,...result.goods],totalPage:Math.ceil(result.total/this.QueryParams.pagesize)})},fail:(err)=>{console.log(err);},complete:()=>{ajaxTimes--;if(ajaxTimes===0){wx.hideLoading();}}

小程序防抖功能以及wx:for的使用相关推荐

小程序不支持wx.request同步请求解决方法
小程序不支持wx.request同步请求解决方法参考文章: (1)小程序不支持wx.request同步请求解决方法 (2)https://www.cnblogs.com/bainiu/p/77038 ...
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转举例: main.js中: tabBar中定义了页面"pages/test/main&qu ...
微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...
微信小程序-bug-调用wx.login()无响应的原因和解决方案
微信小程序-bug-调用wx.login()无响应的原因和解决方案参考文章: (1)微信小程序-bug-调用wx.login()无响应的原因和解决方案 (2)https://www.cnblogs. ...
微信小程序地理位置接口( wx.getLocation )申请方法
在平时我们在开发小程序时,难免会需要用到用户的地理位置信息的功能,微信小程序开发者开放平台新规要求如果没有申请开通微信小程序地理位置接口( wx.getLocation ),是无法审核通过小程序的. ...
微信小程序--后台交互/wx.request({})方法/渲染页面方法解析
小程序的后台获取数据方式get/post具体函数格式如下:wx.request({}) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
微信小程序-音频播放-wx.createInnerAudioContext() 每次都是重复播放同一条录音
前言在调试微信小程序音频播放时,刚开始我也是直接复制官方文档的实例: const innerAudioContext = wx.createInnerAudioContext() innerAudi ...
如何让小程序页面更顺滑_小程序怎样让wx.navigateBack更好用的方法实现
相信只要开发过小程序,对wx.navigateBack 这个 api都不会陌生.在摩拜单车的小程序中,它也被改造的更方便满足复杂的业务需求,可谓之增强型的 wx.navigateBack. 先来看看 ...
小程序坑录-wx.getLocation接口申请
最近在用uni-app通用框架做h5和小程序,结果在小程序审核的时候,又遇到了很多天坑,故记录之. 从2022 年 7 月 14 日开始,使用位置接口,就必须在app.json中进行声明了,除此之外, ...
小程序开发之 wx.getUserInfo获取用户信息方案介绍
原文链接:https://www.cnblogs.com/kenshinobiy/p/9118024.html ========================================= 背景 ...

小程序防抖功能以及wx:for的使用

小程序防抖功能以及wx:for的使用相关推荐

最新文章

热门文章