用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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
js indexOf()定义和用法
Oct 21 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
Vue中props的详解
May 16 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 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 session安全问题分析
2011/06/24 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
php表单处理操作
2017/11/16 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
python 拼接文件路径的方法
2018/10/23 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
django 控制页面跳转的例子
2019/08/06 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
商得四方公司面试题(gid+)
2014/04/30 面试题
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP