h5长按删除元素或其他相关操作

1.H5下长按删除元素

<template>
    <view>
        <view v-for="(item ,index) in arr" :key="index" 
              style="line-height=40px;"       @touchstart.prevent="touchstart(item)"  
         @touchend.prevent="touchend">{{item}}</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                arr: [商品1,商品 2, 商品3, 商品4, 商品5,商品 6]
            }
        },
        methods: {
            touchstart(index) {
                let that = this;
                clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
                console.log(111, index)
                this.Loop = setTimeout(function() {
                    uni.showModal({
                        title: '删除',
                        content: '请问要删除本条消息吗？',
                        success: function(res) {
                            if (res.confirm) {
                                console.log(1324213412)
                                that.arr = that.arr.filter(item => item != index)
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                }.bind(this), 1000);//手指或者鼠标按下等待的时间
            },
            touchend() {
                console.log('结束')
                clearInterval(this.Loop);
            }

        }
    }
</script>

<style>

</style>

2.H5下长按显示删除按钮

<template>
    <view>
        <view v-for="(item ,index) in arr" :key="index"  @touchstart.prevent="touchstart(index)"  
         @touchend.prevent="touchend" style="line-height=40px;" >
             <text>{{item.name}}</text>
             <button v-if='item.isDel'>删除</button>
</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                arr: [{name:'商品1',isDel:false},{name:'商品2',isDel:false}, {name:'商品3',isDel:false}, {name:'商品4',isDel:false}]
            }
        },
        methods: {
            touchstart(num) {
                let that = this;
                clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
                this.Loop = setTimeout(function() {
                                        this.arr.map((item,index)=>{
                                                if(index==num){
                                                   this.arr[index].isDel = true
                                                }else{
                                                     this.arr[index].isDel = false
                                                }
                                        }) 
                }.bind(this), 1000);//手指或者鼠标按下等待的时间
            },
            touchend() {
                console.log('结束')
                clearInterval(this.Loop);
            }

        }
    }
</script>

<style>

</style>