Maison > interface Web > js tutoriel > Partage d'exemples d'exigences d'événement de pression longue VUE

Partage d'exemples d'exigences d'événement de pression longue VUE

小云云
Libérer: 2018-01-09 13:41:36
original
2281 Les gens l'ont consulté

Cet article présente principalement en détail les besoins de plusieurs événements de presse longs pour tout le monde. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Dans le développement, des événements de presse longs sont souvent nécessaires. Ici, je vais présenter brièvement les exigences pour plusieurs événements de presse longs.

Condition 1 : Appuyez longuement sur le numéro pour ajouter ou soustraire

HTML :


<p class="mui-numbox" data-numbox-step=&#39;10&#39; data-numbox-min=&#39;0&#39; data-numbox-max=&#39;100&#39;>
   <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>
</p>
Copier après la connexion

JS :


var vm = new Vue({     
  el: "#vue-container",
  data:{
    Loop:null
  },
  methods:{//长按添加数量
    Loop_Add:function(ID){
      //设置数量
      clearInterval(vm.Loop);//再次清空定时器,防止重复注册定时器
      $target=$(event.target).parent().find(&#39;input&#39;);
      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(&#39;input&#39;);
      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);
    }
  }
})
Copier après la connexion

Cette démo a été testée côté mobile, elle utilise donc des événements tactiles. La méthode est très simple. Enregistrez une minuterie d'intervalle lorsque vous touchez le démarrage et effacez la minuterie lorsque vous touchez la fin. De cette façon, vous pouvez obtenir l'effet d'une accumulation continue ou d'une décrémentation d'une pression longue.

Exigence deux : Déclencheur d'événement de retard d'appui long

Ce type d'exigence est également relativement simple, similaire à la première exigence. Prenons l'exemple de l'exigence 1. Ajoutez simplement un minuteur setTimeout à touchstart pour retarder l'exécution de l'événement et touchend pour effacer le minuteur.

Recommandations associées :

Exemple de la méthode de vue consistant à centrer verticalement les images longues en haut et les images courtes centrées verticalement

vue utilise axios Explication détaillée des exemples de données de requêtes inter-domaines

Comment utiliser les composants d'ordre supérieur de Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal