用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异常处理的一个想法(sofish)
Mar 14 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
php生成随机数的三种方法
2014/09/10 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
python实现图片处理和特征提取详解
2017/11/13 Python
python 将md5转为16字节的方法
2018/05/29 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
捐书倡议书
2014/08/29 职场文书
小学生校园广播稿
2014/09/28 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
Golang表示枚举类型的详细讲解
2021/09/04 Golang
日元符号 ¥
2022/02/17 杂记