微信小程序开发常用方法

持续更新中

1.解决ios底部横杠

  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

2.小程序点击函数节流和防抖

<button bindtap='tap' data-key='abc'>tap</button>

const util = require('../../utils/util.js')
Page({
    data: {
        text: 'tomfriwel'
    },
    onLoad: function (options) {
 
    },
    tap: util.throttle(function (e) {
        console.log(e)
    }),
    onPageScroll: uril.throttle(function () {
	   console.log(111)
	}),
})

// 函数节流
function throttle(fn, interval = 2000) {
  var enterTime = 0; //触发的时间
  var gapTime = interval; //间隔时间，如果interval不传，则默认2000ms
  return function (e) {
    var that = this;
    var backTime = new Date(); //第一次函数return即触发的时间
    if (backTime - enterTime > gapTime) {
      fn.call(that, e, arguments);
      enterTime = backTime; //赋值给第一次触发的时间，这样就保存了第二次触发的时间
    }
  };
}
// 函数防抖
function debounce(fn, interval = 2000) {
  var timer;
  var gapTime = interval; //间隔时间，如果interval不传，则默认2000ms
  return function (e) {
    clearTimeout(timer);
    var that = this;
    var args = arguments; //保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
    timer = setTimeout(function () {
      fn.call(that, e, args);
    }, gapTime);
  };
}
module.exports = {
  throttle: throttle,
  debounce:debounce
}

3.解决view中文字过多时内容不换行问题

.content{
  word-break:break-all;
}

4.手机号正则

 if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(phone))){ 
    wx.showToast({
        title: '手机号不正确',
        icon:"none"
      })
      return false; 
  } 

5.修改小程序swiper滑块样式

.swiper .wx-swiper-dots-horizontal{  //滑块整体
  margin-bottom: 24rpx;
}
.swiper .wx-swiper-dot{		//未选中状态
  background-color: #E1E2E2;
}
.swiper .wx-swiper-dot-active{  //选中状态
  background-color: #4EA259;
}