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

目前总结解决方法：同时需要设置模块拆猜的函数，函数都可放置在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')

即可。

打开微信小程序开销神发工具，创建项目，并新建页面文件

2

/7

打开页面文件，插入一个view标签和block标签，并添加wx:for循环指令

3

/7

接着新建一个页面JavaScript文件，在data对象中初始化数组weeks

4

/7

保存代码并查看左侧的模拟器，可以查看到宴大一个列表

5

/7

在view标签下方，添加一个button按钮，然后添加bindtap

6

/7

在对应的JS文件中，添加一个点击事件addData，并打印数组结果

7

/7

打开内置浏览器控制台晌斗竖，查看打印结果

如果左右的样式完全一样，只用一个view来循橘困环即可，如扰缺果左右样式不同，则需要根据Index判断奇偶来写左右两侧的样式。block wx:if="{{index%2==0}}"圆李念

---