首页 > 前端故事

vue中利用@touchmove控制页面是否滚动

时间:2020-12-10|浏览次数:626次

在使用vue开发中,碰到页面有时候需要滚动,有时候不需要滚动的情况。例如:

移动端开发时,可以上下滑动的swiper中,里面有个容器可以益处滚动,为了防止滚动容器到顶或底部的时候带动swiper滑动,这个时候@touchmove就派上用场了。

在这个容器上或者父级任意元素加上 @touchmove.stop = "" 即可。

// 这是基于uniapp简单示例
<swiper :vertical="true">
    // ...
    <swiper-item>
        // ...
          <view @touchmove.stop = "">
              <scroll-view class="prov-box-scroll" :show-scrollbar="false" scroll-y :scroll-top="provBoxScrollTop" @scroll="onScroll">
                  // ...
              </scroll-view>
          </view>
        // ...
    </swiper-item>
    // ...
</swiper>

uniapp中使用 

@touchmove.stop.prevent="()=>{}"