用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 相关文章推荐
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
详解Node.JS模块 process
Aug 31 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
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python编写一个闹钟功能
2017/07/11 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
python web框架 django wsgi原理解析
2019/08/20 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
加工操作管理制度
2014/01/19 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
创先争优一句话承诺
2014/05/29 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
离婚民事起诉状
2015/08/03 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python