美文网首页
vue 手机触屏滑动走马灯

vue 手机触屏滑动走马灯

作者: 背着生活往前走你才辨的出美和丑 | 来源:发表于2020-12-21 08:47 被阅读0次

    功能: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 手机触屏滑动走马灯

          本文链接:https://www.haomeiwen.com/subject/yybagktx.html