功能：圖片自動輪播+圖片上的點贊+左滑/右滑切換圖片

html

<template>
    <section class="slide-good">
        <ul class="slide-good-list" >
            <transition-group tag="ul" :name="[isLeftSwipe?'image':'left']">
                <li class="slide-good-item" v-for="(item,index) in slideList" :key="index" v-show="index===currentIndex" >
                    <img :src="item.slideImg" alt="" @touchstart.capture="touchStart" @touchend.capture="touchEnd" > 
                    <div class="slide-good-zan" @click="goLike(index)">
                        <i></i>
                        <p>{{item.count > 9999 ? '9999+' : item.count}}</p>
                    </div>
                </li>
            </transition-group>
        </ul>
    </section>
</template>
複製程式碼

css

.slide-good{
    padding: remit(11) remit(17) remit(14) remit(18);
    box-sizing: border-box;
    .slide-good-list{
      position: relative;
      width:remit(677);
      height:remit(377);
      overflow: hidden;
    }
    .slide-good-item{
      position: absolute;
      img{
        width:remit(677);
        height:remit(377);
      }
    }
    .slide-good-zan{
      width:remit(88);
      height:remit(88);
      position: absolute;
      bottom:remit(20);
      left: 50%;
      margin-left: remit(-44);
      border-radius: 50%;
      background:#ff4f4f;
      color:#fff;
      i{
        display: block;
        margin:remit(9) auto remit(5);
        @include background('../images/icon-good.png', 38, 36);
      }
      p{
        text-align: center;
        font-size:remit(20);
      }
    }
  }
複製程式碼

js

export default EventView.extend({
    data(){
        return{
            slideList:[
                {slideImg:'#link(~/images/yi.png)',count:35},
                {slideImg:'#link(~/images/er.png)',count:999},
                {slideImg:'#link(~/images/san.png)',count:9999},
                {slideImg:'#link(~/images/si.png)',count:3},
            ],
            currentIndex:0,
            timer: null,
            currentGood:null,
            startX:0,
            isLeftSwipe:true
        }
    },
    methods: {
        autoPlay()
            this.timer = setInterval(() => {
                this.isLeftSwipe=true;
                this.currentIndex++;
                if (this.currentIndex > this.slideList.length - 1) {
                    this.currentIndex = 0
                }
            }, 4000);
        },
        stopPlay(){
            clearTimeout(this.timer);
            this.timer = null
        },
        touchStart(e){
            this.startX = e.touches[0].clientX;
        },
        touchEnd(e){
			// 記錄結束位置
            this.endX = e.changedTouches[0].clientX;
            if(this.startX - this.endX > 30  ){
                console.log('左滑');
                this.stopPlay();
                this.currentIndex++;
                if (this.currentIndex > this.slideList.length - 1) {
                    this.currentIndex = 0;
                }
                this.autoPlay();
            }
            
            // 右滑
			if(this.startX - this.endX < -30 ){
                console.log('右滑');
                this.stopPlay();
                this.isLeftSwipe=false;
                this.currentIndex--;
                if (this.currentIndex < 0) {
                    this.currentIndex = this.slideList.length - 1;
                }
                this.autoPlay();
            }

            this.startX = 0;
			this.endX = 0;
        },
        goLike(i){
            if(ek.isApp){
                this.currentGood=i;                  
                models.load('md_good',i+1);
            }else{
                ek.ac.WebView.OpenUrl({
                    'url':'http://m.ac.qq.com/event/huangfeiIntroduce201901/index.html'
                })
            }
              
            this.reportClick('btn-good');          
        }
    },
    created () {
        this.$nextTick(() => {
            this.autoPlay();
        })
        
    },
    events:{
        indexDate(res){
            let good=res.good;
            this.slideList.forEach((element,index) => {
                element.count=good[index + 1];
            });
        },
        goodDate(res){
            let i=this.currentGood;
            this.slideList[i].count++; 
            this.currentGood=null;      
            Dialog.alert('點贊成功！');
            
        }
    }
})
複製程式碼