成都网站建设设计

将想法与焦点和您一起共享

用vue如何实现手机触屏滑动功能的代码示例

这篇文章主要讲解了用vue如何实现手机触屏滑动功能的代码示例,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

成都创新互联公司专注于企业成都全网营销、网站重做改版、嘉禾网站定制设计、自适应品牌网站建设、H5建站商城开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为嘉禾等各大城市提供网站开发制作服务。

功能:iview Carousel 走马灯,我需要在phone上实现滑动切换功能。

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如何实现手机触屏滑动功能的代码示例
浏览路径:http://chengdu.cdxwcx.cn/article/gecpod.html