用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代码经典广告
Oct 21 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
js实现简易计算器小功能
Nov 18 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新手上路(九)
2006/10/09 PHP
PHP文件上传实例详解!!!
2007/01/02 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
javascript处理table表格的代码
2010/12/06 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
angularJS开发注意事项
2018/05/26 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
python3使用flask编写注册post接口的方法
2018/12/28 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
学生干部学习的自我评价
2014/02/18 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
社区健康教育实施方案
2014/03/18 职场文书
一年级小学生评语
2014/04/22 职场文书
活动总结报告范文
2014/05/04 职场文书
主要领导对照检查材料
2014/08/26 职场文书
公司授权委托书范本
2014/09/18 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
学生检讨书范文
2015/01/27 职场文书
义诊活动总结
2015/02/04 职场文书
小学科学课教学反思
2016/02/23 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers