用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 相关文章推荐
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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
深入了解php4(1)--回到未来
2006/10/09 PHP
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
浅析javascript 定时器
2014/12/23 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
大学生党课思想汇报
2013/12/29 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
承诺书格式
2014/06/03 职场文书
赔偿协议书
2015/01/27 职场文书
长城英文导游词
2015/01/30 职场文书
处罚决定书范文
2015/06/24 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
教你用python实现12306余票查询
2021/06/30 Python
R9700摩机记
2022/04/05 无线电
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL