微信小程序遇坑——多次点击页面重复加载及数据重复提交

Posted 2023-03-22

参考技术A 目前总结解决方法：同时需要设置模块的函数，函数都可放置在util.js中去。

首先：

一、在util.js中放入如下两组函数

1. 设置点击后多久不能再次操作该

function throttle(fn, gapTime)

  if (gapTime == null || gapTime == undefined)

    gapTime = 1500

 

  let _lastTime = null

  // 返回新的函数

  return function ()

    let _nowTime = + new Date()

    if (_nowTime - _lastTime > gapTime || !_lastTime)

      fn.apply(this, arguments)  //将this和参数传给原函数

      _lastTime = _nowTime

   

 



2. 设置加载动画

function showLoading(message)

  if (wx.showLoading)     // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理

    wx.showLoading(

      title: message, mask: true

    );

  else     // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失

    wx.showToast(

      title: message, icon: 'loading', mask: true, duration: 20000

    );

 



function hideLoading()

  if (wx.hideLoading)     // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理

    wx.hideLoading();

  else

    wx.hideToast();

 



并且将其导出作为页面使用：

module.exports =

  throttle: throttle,

  showLoading: showLoading,

  hideLoading: hideLoading,



二、将函数引入页面使用

const util = require('../../utils/util.js');

即可。

微信小程序 下拉加载执行多次怎么破

//碰到过同样的问题， 下拉我用的 onReachBottom 事件

onReachBottom: function()
let page_data = this.data;
if(this.data.has_more == true)
//防止重复、先直接设置FALSE，等返回值再设置
//不要问为啥has_more直接设置FALSE，因为他妹的request只有异步。。。setData可能没生效，所以你阻止不了事件
this.data.has_more = false;

//你的request地址 p是分页地址，在yt_url里面对p++,判断是否有更多 has_more
let yt_url = '';

wx.request(
url: yt_url+'?p='+page_data.p,
data:
,
header:
'content-type': 'application/json'
,
success: function(res)
resultData = res.data
this.data.p = resultData.p //设置页数为返回值的页数，因为setData没那么快。。
this.setData(
has_more : resultData.has_more,//设置页面
p : resultData.p,//是否还有更多
)

)

参考技术A //页面滑动到底部
 bindDownLoad: function () 
   var that = this;
   if (hasmore == true) 
     hasmore = false;
     page ++;
     wx.request(
       url: url,
       method: 'GET',
       data: 
         page: page,
       ,
       success: function (res) 
         for (var i = 0; i < res.data.length; i++) 
           list.push(res.data[i]);
         
         that.setData(
           companydata: list,
         )
         setTimeout(function () 
           hasmore = true;
         , 1000)
       
     )
   
 ,

我取了个巧，用计时器，添加完成数据后1秒后才会把hasmore变成true。这样就是说1秒只能加载一次 。感觉完全够用了。