vue swipe

gistfile1.txt

<template>
    <section class="bx-muti-img-bar">
        <div class="slide-items" :style="style">
            <div class="slide-item" v-for="(slide, index) in value.slides" 
                :key="index" 
                :style="[slideStyle[index], getStyle(index)]"
            >
                <img :src="slide['image']">
            </div>
        </div>
        <div class="indicator">
            <span>{{cIndex}}/{{len()}}</span>
        </div>       
    </section>
</template>
<script>
    import Base from './base.vue'
    const width = 375
    export default {
        mixins: [
            Base
        ],
        data() {
            return {
                    style: {
                        width: this.len() * width + 'px'
                    },
                    slideStyle: this.getSlideStyle(this.value.slides),
                    //len: this.value.slides.length,
                    cIndex: 1,
                    count: this.len(),
                    timerId: null
                } 
        },
        watch: {
            'value.slides': function(newValue, oldValue) {
                this.getSlideStyle(newValue)
                this.cIndex = 1
                this.style.width = newValue.length * width + 'px'
                if (newValue.length === 1) {
                    this.slideStyle.splice(0, 1, {
                        transform: `translate(0, 0) translateZ(0px)`,
                    })
                }
                this.addTimer()
            }
        },
        methods:{
            getStyle(index) {
                return {
                    left: index * -(width) + 'px',
                }
            },
            len() {
                return this.value.slides.length
            },
            getSlideStyle(data) {
                const slideStyle = []
                for(let i = 0; i < data.length; i++) {
                    slideStyle.push({
                        transform: `translate(${i * width + 'px'}, 0) translateZ(0px)`
                    })
                } 
                return slideStyle
            },
            addTimer() {
                let index = 0
                if (this.timerId) {
                    clearInterval(this.timerId)
                }
                this.timerId = setInterval(() => {
                    if (this.count < 2)  return
                    index++
                    let len = this.value.slides.length - 1
                    if (index > len) {
                        this.current = 0
                        index = 0
                    }
                    this.slideStyle.splice(index, 1, {
                        transform: `translate(0, 0) translateZ(0px)`,
                    })
                    let pre = index - 1
                    let next = index + 1
                    
                    if (next > len) {
                        next = 0
                    }
                    this.slideStyle.splice(index, 1, {
                        transform: `translate(0, 0) translateZ(0px)`,
                        transitionDuration: '300ms'
                    })
                    this.slideStyle.splice(pre, 1, {
                        transform: `translate(-${width}px, 0) translateZ(0px)`,
                        transitionDuration: '0ms'
                    })
                    this.slideStyle.splice(next, 1, {
                        transform: `translate(${width}px, 0) translateZ(0px)`,
                        transitionDuration: '0ms'
                    })
                this.cIndex = index + 1  
                }, 3000)
            }
        },
        mounted() {
            this.addTimer()
        },
        destroyed() {
            if (this.timerId) {
                clearInterval(this.timerId)
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .bx-muti-img-bar
        overflow hidden
        position relative
        height 180px
    .slide-item
        width 375px
        height 180px
        position relative
        top 0
        float left
        transition-duration 0
        img
            width 100% 
            height 180px
            vertical-align middle  

    .indicator 
        position absolute
        width 44px
        height 20px
        line-height 20px
        background-color rgba(0, 0, 0, 0.5)
        color #fff
        left 50%
        bottom 10px
        transform translate(-50%) 
        border-radius 10px 
        font-size 12px
        text-align center              
</style>