vue实现h5页面触摸滑动

• Z时代
• 2024-01-10
• 分类：综合

<div class="content">
            <div class="content-list" @touchstart="phone_mouseS" @touchend="phone_mouseE">
                <ul class="date-list">
                    <li v-for="(showData,index) in showData" :class="index < front_gray?'gray':''||
                    index >= behind_gray?'gray':''" :key="index" @click="calendarEvents(showData)">{{showData}}</li>
                </ul>
                <ul class="date-list">
                    <li v-for="(frontShowData,index) in frontShowData" :class="index < front_gray?'gray':''||
                    index >= behind_gray?'gray':''" :key="index">{{frontShowData}}</li>
                </ul>
                <ul class="date-list">
                    <li v-for="(showData,index) in showData" :class="index < front_gray?'gray':''||
                    index >= behind_gray?'gray':''" :key="index">{{showData}}</li>
                </ul>
            </div>
        </div>

data(){
  return{
    phone_mouseMIndex: 0,
    phone_mouseMX0: 0,
    phone_mouseMX1: 0,
  }  
}

        phone_mouseS(e){
            this.phone_mouseMX0 = e.changedTouches[0].pageX;
        },
        phone_mouseE(e){
            this.phone_mouseMX1 = e.changedTouches[0].pageX;
            let tag = this.phone_mouseMX1 - this.phone_mouseMX0;
            if(tag >= 50){
                //向右划
            }
            if(tag <= -50){
                //向左划
            }
        },

注意：在h5中需要禁用浏览器向右划返回上一页

<script>
  document.body.addEventListener('touchmove', function (e) {
    e.preventDefault();
    e.stopPropagation();
}, {passive: false})
</script>

以上是 vue实现h5页面触摸滑动 的全部内容， 来源链接： utcz.com/z/377989.html