当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 用vue 实现手机触屏滑动功能

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

2020年06月14日  | 移动技术网IT编程  | 我要评论

莫言获奖演讲,绑架冰激凌歌曲,齐鲁绳艺

功能：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 手机触屏滑动内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网