vue自定义滑动轮播组件

直接上代码：

    
        {{ item.name }}
    

export default {
    props: {
        swiperList: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            itemStyle: [],
            touchTimer: null
        }
    },
    mounted() {
        this.swiperList.forEach((item, index)=> {
            this.itemStyle.push(this.getStyle(index))
        })
    },
    methods: {
        getStyle(e) {
            if(e > this.swiperList.length / 2) {
                var right = this.swiperList.length - e
                return {
                    transform: 'scale(' + (1 - right / 4) + ')translate(-' + (right * 72) + '%,0px',
                    zIndex: 8 - right,
                    opacity: 0.8 / right
                }
            } else {
                return {
                    transform: 'scale(' + (1 - e/ 4) + ')translate(-' + (e* 72) + '%,0px',
                    zIndex: 8 - e,
                    opacity: 0.8 / e
                }
            }
        },
        startMove(e) {
            this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
            this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
        },
        endMove(e, item) {
            let _this = this
            let deltaX = e.changedTouches[0].pageX = this.slideNote.x
            let deltaY = e.changedTouches[0].pageY = this.slideNote.y
            if(Math.abs(deltaY) > 50) {
                // 上下滑动不轮播
                e.preventDefault()
                return
            } else if(Math.abs(deltaY) < 20&& Math.abs(deltaX) < 30) {
                // 点击不轮播，降低滑动时轮播灵敏度
                e.preventDefault()
                return
            } else {
                var newList = JSON.parse(JSON.stringify(this.itemStyle))
                if((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
                    // 向左滑动
                    var last = [newList.pop()]
                    newList = last.concat(newList)
                    // 滑动时定位当前dom
                    let obj = {}
                    this.swiperList.forEach((item1, index1)=> {
                        if(item1.activeName==item.activeName) {
                            if(index1==(_this.swiperList.length - 1)) {
                                obj = _this.swiperList[index1 + 1]
                            } else {
                                obj = _this.swiperList[index1 + 1]
                            }
                        }
                    })    
                } else {
                    newList.push(newList[0])
                    newList.splice(0, 1)
                    // 滑动时定位当前dom
                    let obj = {}
                    this.swiperList.forEach((item1, index1)=> {
                        if(item1.activeName==item.activeName) {
                            if(index1==0) {
                                obj = _this.swiperList[this.swiperList.length - 1]
                            } else {
                                obj = _this.swiperList[index1 - 1]
                            }
                        }
                    })
                }
                this.itemStyle = newList
            }
        }
    }
}