用vue 实现手机触屏滑动功能

 更新时间:2020年05月28日 10:27:46   作者:悠讓  
这篇文章主要介绍了用vue 实现手机触屏滑动的功能,文中通过示例代码给大家介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

功能:iview Carousel 走马灯,我需要在phone上实现滑动切换功能。

<div class="phone" @touchstart="phone_mouseS" @touchend="phone_mouseE">
<Carousel :autoplay-speed="5000" v-model="phone_mouseMIndex" autoplay :value="0" loop v-if="menuChoose == '/'">
 <CarouselItem>
 <img class="img" src="../../static/common/phone_banner_index1.jpg" />
 </CarouselItem>
 <CarouselItem>
 <img class="img" src="../../static/common/phone_banner_index1.jpg" />
 </CarouselItem>
 <CarouselItem>
 <img class="img" src="../../static/common/phone_banner_index3.jpg" />
 </CarouselItem>
</Carousel>
</div>
data() {
return {
 phone_mouseMIndex: 0, // phone端 滑动索引
 phone_mouseMX0: 0, // phone端 滑动索引
 phone_mouseMX1: 0, // phone端 滑动索引
}
},
...
// phone端 滑动开始
phone_mouseS(e){
 this.phone_mouseMX0 = e.changedTouches[0].pageX;
},
// phone端 滑动结束
phone_mouseE(e){
 this.phone_mouseMX1 = e.changedTouches[0].pageX;
 let tag = this.phone_mouseMX1 - this.phone_mouseMX0;
 if(tag >= 50){
 if(this.phone_mouseMIndex > 0){
 this.phone_mouseMIndex--;
 }else{
 this.phone_mouseMIndex = 2;
 }
 }
 if(tag <= -50){
 if(this.phone_mouseMIndex < 2){
 this.phone_mouseMIndex++;
 }else{
 this.phone_mouseMIndex = 0;
 }
 }
}

到此这篇关于用vue 实现手机触屏滑动功能的文章就介绍到这了,更多相关vue 手机触屏滑动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中组件传参的几种常用方法举例

    vue中组件传参的几种常用方法举例

    这篇文章主要给大家介绍了关于vue中组件传参的几种常用方法,Vue组件传参方也是面试最常考的内容,文中通过代码实例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • 详解element-ui动态限定的日期范围选择器代码片段

    详解element-ui动态限定的日期范围选择器代码片段

    这篇文章主要介绍了element-ui动态限定的日期范围选择器代码片段,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue的状态更新方式(异步更新解决)

    vue的状态更新方式(异步更新解决)

    这篇文章主要介绍了vue的状态更新方式(异步更新解决),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 关于在vscode使用webpack指令显示

    关于在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题(完美解决)

    这篇文章主要介绍了解决在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题,本文给大家分享完美解决方法,需要的朋友可以参考下
    2021-07-07
  • 某些场景下建议vue query代替pinia原理解析

    某些场景下建议vue query代替pinia原理解析

    这篇文章主要为大家介绍了某些场景下建议vue-query代替pinia原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Vue3 的ref和reactive的用法和区别示例解析

    Vue3 的ref和reactive的用法和区别示例解析

    ref和reactive是Vue3中用来实现数据响应式的API,一般情况下,ref定义基本数据类型,reactive定义引用数据类型,本文给大家介绍Vue3 的ref和reactive的用法和区别,感兴趣的朋友一起看看吧
    2023-10-10
  • vue项目如何监听localStorage或sessionStorage的变化

    vue项目如何监听localStorage或sessionStorage的变化

    这篇文章主要介绍了vue 项目如何监听localStorage或sessionStorage的变化,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • 浅析一下Vue3的响应式原理

    浅析一下Vue3的响应式原理

    这篇文章主要通过示例和大家一起浅析一下Vue3的响应式原理,文中的示例代码讲解详细,对我们学习Vue3有一定帮助,需要的可以参考一下
    2022-08-08
  • 深入对Vue.js $watch方法的理解

    深入对Vue.js $watch方法的理解

    本篇文章主要介绍了深入对Vue.js $watch方法的理解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧。
    2017-03-03
  • vue2实现封装动态表单组件

    vue2实现封装动态表单组件

    这篇文章主要介绍了vue2实现封装动态表单组件,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08

最新评论