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


Posted in Javascript onMay 28, 2020

功能: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 手机触屏滑动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
js调试系列 初识控制台
Jun 18 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 #jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 #jQuery
JS替换字符串中指定位置的字符(多种方法)
May 28 #Javascript
js实现九宫格布局效果
May 28 #Javascript
微信小程序实现电子签名并导出图片
May 27 #Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 #Javascript
微信公众号网页分享功能开发的示例代码
May 27 #Javascript
You might like
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python自动化测试实例解析
2014/09/28 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
应用服务器有那些
2012/01/19 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
分厂厂长岗位职责
2013/12/29 职场文书
小学教师寄语大全
2014/04/03 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
销售辞职信范文
2015/03/02 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript