用vue 實(shí)現(xiàn)手機(jī)觸屏滑動功能
功能:iview Carousel 走馬燈,我需要在phone上實(shí)現(xiàn)滑動切換功能。
<div @touchstart='phone_mouseS' @touchend='phone_mouseE'><Carousel :autoplay-speed='5000' v-model='phone_mouseMIndex' autoplay :value='0' loop v-if='menuChoose == ’/’'> <CarouselItem> <img src='http://www.gepszalag.com/static/common/phone_banner_index1.jpg' /> </CarouselItem> <CarouselItem> <img src='http://www.gepszalag.com/static/common/phone_banner_index1.jpg' /> </CarouselItem> <CarouselItem> <img src='http://www.gepszalag.com/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端 滑動結(jié)束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; } }}
到此這篇關(guān)于用vue 實(shí)現(xiàn)手機(jī)觸屏滑動功能的文章就介紹到這了,更多相關(guān)vue 手機(jī)觸屏滑動內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條2. Ajax對xml信息的接收和處理操作實(shí)例分析3. Jsp中request的3個基礎(chǔ)實(shí)踐4. Ajax返回值類型與用法實(shí)例分析5. ASP動態(tài)include文件6. php根據(jù)id生成10位不重復(fù)數(shù)字跟字母混合字符串7. Python request中文亂碼問題解決方案8. 利用Java對PDF文件進(jìn)行電子簽章的實(shí)戰(zhàn)過程9. python簡單實(shí)現(xiàn)9宮格圖片實(shí)例10. Java實(shí)戰(zhàn)之實(shí)現(xiàn)一個好用的MybatisPlus代碼生成器

網(wǎng)公網(wǎng)安備