ホームページ > 記事 > ウェブフロントエンド > VUE 長押しイベント要件の共有例

VUE 長押しイベント要件の共有例

小云云オリジナル: 2018-01-09 13:41:362270ブラウズ

この記事では、主にいくつかの長押しイベントのニーズを詳しく紹介します。興味のある方は参考にしていただければ幸いです。

開発では、長押しイベントが必要になることがよくあります。ここで、いくつかの長押しイベントの要件を簡単に紹介します。

要件 1: 数字を長押しして加算または減算します

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>

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);
　　　　}
　　}
})

このデモはモバイル側でテストされているため、タッチイベントが使用されます。方法は非常に簡単で、タッチスタートでインターバルタイマーを登録し、タッチエンドでタイマーをクリアすることで、連続的に加算または減算する効果を得ることができます。

要件 2: 長押し遅延イベントトリガー

このタイプの要件も、要件 1 と同様、比較的単純です。要件 1 を例に挙げます。setTimeout タイマーを touchstart に追加してイベントの実行を遅延し、touchend を追加してタイマーをクリアします。

VUE 長押しイベント要件の共有例

関連記事