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

2022年05月22日 阅读348次 分类:开发 标签:vue微码

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1894.html

在使用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="()=>{}"


(本篇完)

是不是学到了很多?可以

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1894.html