html:

<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
   <button class="mui-btn mui-numbox-btn-minus" type="button"@touchstart="loop_sub(item.cartid)" @touchend="clearloop()">-</button>
   <input class="mui-numbox-input" type="number" :value="item.cart_nums"/>
   <button class="mui-btn mui-numbox-btn-plus" type="button" @touchstart="loop_add(item.cartid)" @touchend="clearloop()">+</button>
</div>

js:

var vm = new vue({     
  el: "#vue-container",
  data:{
    loop:null
  },
  methods:{//长按添加数量
    loop_add:function(id){
      //设置数量
      clearinterval(vm.loop);//再次清空定时器,防止重复注册定时器
      $target=$(event.target).parent().find('input');
      vm.loop=setinterval(function(){
      $num=$target.val();
      $target.val(parseint($num)+1);
      },100);
    },
    //长按减少数量
    loop_sub:function(id){
      //设置数量
      clearinterval(vm.loop);//再次清空定时器,防止重复注册定时器
      $target=$(event.target).parent().find('input');
      vm.loop=setinterval(function(){
        $num=$target.val();
        if($num>0){
          $target.val(parseint($num)-1);
        }else{
          clearinterval(vm.loop);
        }
        //改变点击数
      },100);
    },
    clearloop:function(){
      clearinterval(vm.loop);
    }
  }
})

 这个demo是在移动端测试的,因此使用的是touch事件。方法很简单,touchstart的时候去注册个interval定时器,touchend的时候再把定时器清除掉,这样就能实现长按持续累加或者累减的效果。

需求二:长按延时事件触发

这类需求也比较简单,和需求一类似。这里拿需求一举例,只需在touchstart添加settimeout计时器延时事件执行,touchend清除计时器即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇: vue学习笔记之v-if和v-show的区别

下一篇: JS去掉字符串中所有的逗号

推荐阅读