vue.js - vue中 怎么解决 scroll 左右滑动必须长按？

问题描述

问 题

page.vue 中template

<div class="similarShop" v-if="similarInfos.length">
    <p class="title">相似门店</p>
    <div class="view">
        <div class="container" :style="{width:3*similarInfos.length +'rem'}">
            <div class="item" v-for="item in similarInfos" @click="similarTap(item.shopNo)">
                <img v-lazy="item.shopImage"/>
                <p class="shopName">{{ item.shopNm }}</p>
            </div>
        </div>
    </div>
</div>

page.vue 中style

.similarShop {
    background-color: #ececec;
    .title {
        padding-left: 0.44rem;
        line-height: 0.8rem;
        color: #333;
    }
    .view {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .container {
        overflow: hidden;
        position: relative;
        margin-left: 0.44rem;
        margin-bottom: 0.4rem;
    }
    // item
    .item {
        float: left;
        width: 2.8rem;
        margin-right: 0.2rem;
        color: #666;
        line-height: 0.6rem;
        img {
            float: left;
            width: 100%;
            height: 2.8rem;
            border: solid 1px #666;
            box-sizing: border-box;
        }
    }
}

问题：
1、直接新建一个html文件 左右滑动很流畅（项目一期也是这么干的）
2、vue项目中运行必须长按才可以左右滑动，同时有警告信息[webpack打包，pc浏览器版本一样，vue页面运行有警告，但流畅滑动，手机端上就卡顿，必须长按才可以滑动]。

shop.chunk.js:1 Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

不知道有没有好的解决方案，初步的想法是：需要通过自定义指令监听touchmove事件。

解决方案

zepto 1.1版本中touchmove 事件中 注释掉最后一行

 .bind('touchmove', function(e){
    cancelLongTap()
    touch.x2 = e.touches[0].pageX
    touch.y2 = e.touches[0].pageY
    if (Math.abs(touch.x1 - touch.x2) > 10)
      e.preventDefault()
  })

这篇关于vue.js - vue中 怎么解决 scroll 左右滑动必须长按？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！