05 Oct 2018

[备忘]mpvue进阶

mpvue进阶

1. 函数防抖

在公共函数中注册debounce函数

export function debounce(func, delay) {
  let timer

  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

之后再需要用到的页面中调用,例如替换掉原有的watch变量(降低其监听的频率到半秒一次):

this.$watch('card', debounce(() => {
    this.onChangeCard(this.card);
}, 500))

2. 左滑动画

<div v-for="(card,i) in BankCards" :id="i" :key="i" class="bankcard flex" :style="{ 'background-color': bank[card.bank]?bank[card.bank].color:'#aaa', 'margin-left': selectId===i ? -delta+'px': '0px', 'margin-right': selectId===i ? delta+'px': '0px',}" @click="select(i)" @touchstart.prevent="touchS" @touchmove.prevent.stop="touchM" @touchend.prevent="touchE">
    <div class="icon-warp">
        <img v-if="bank[card.bank]" class="icon-22" :src="bank[card.bank].src" style="margin-top:3.5px;">
    </div>
    <div style="flex:1">
        <div class="fs-15 white-color">&nbsp;</div>
        <div class="fs-14 white-color">尾号</div>
    </div>
    <img v-if="BankId === i && (selectId!==i || delta === 0)" style="margin-right:10px;opacity:0.5;" src="/static/img/icons/check.svg" class="icon-15">
    <div @click.stop="deleteCard" v-show="selectId===i && delta>0" :id="card.uuid" class="delete" :style="{ 'margin-left': -delta+'px', 'margin-right': delta + 'px',}">删除</div>
</div>
touchS(e) {
    console.log(e.currentTarget.id);
    if (e.touches.length === 1) {
        // 设置触摸起始点水平方向位置
        this.startX = e.touches[0].clientX;
        // 设置当前点击的银行卡
        this.selectId = parseInt(e.currentTarget.id, 10);
    }
},
// 滑动中事件
touchM(e) {
    if (e.touches.length === 1) {
    // 手指移动时水平方向位置
        const moveX = e.touches[0].clientX;
        // 手指起始点位置与移动期间的差值
        const disX = this.startX - moveX;
        if (disX > 0 && disX < 50) {
          this.delta = disX;
        } else if (disX >= 50) {
          this.delta = 50;
        } else if (disX < 0) {
          this.delta = 0;
        }
        // console.log(disX);
    }
},
touchE() {
    if (this.delta > 25) {
        this.delta = 50;
    } else {
        this.delta = 0;
    }
},

3. 收集formid实现多条推送

<form @submit="submit" report-submit='true'>
    <button form-type="submit">提交按钮</button>
</form>
submit(e) {
    //e.target.formId
}

4. mpvue-loader版本过高会无法自动生成app.json

这是为了支持分包而做的优化,mpvue-loader高于1.0.13的需要手写app.json。

"mpvue-loader": "1.0.13",