用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://www.jxjierui.cn/article/gecpod.html


咨询
建站咨询
