To write a simple version of the swiper, later re-learning optimization

<template>
    <div class="swiper">
        <div id="swiper_lsc" class="swiper_lsc">
            <div class="swiper_box" v-for="(item,index) in imgArr" :key="index">
                <img :src="item.url" alt="">
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'swiper',
    data() {
        return {
            imgArr:[
                {url:require('@/assets/images/index/icon_code1.png')},
                {url:require('@/assets/images/index/icon_code1.png')},
                {url:require('@/assets/images/index/icon_code1.png')},
                {url:require('@/assets/images/index/icon_code1.png')},
            ],
        }
    },
    created() {
        
    },
    mounted() {
        var mybody = document.getElementsByTagName('body')[0];
        var mySwiper=document.getElementById('swiper_lsc');
        var mySwiperBox=document.getElementsByClassName('swiper_box')[0].clientWidth;
        var h = document.documentElement.clientHeight;
        var w = document.documentElement.clientWidth;
        var scrollW=(w-mySwiperBox-44)/2;
        var len=this.imgArr.length;
        mySwiper.style.width=len*(mySwiperBox+22)+'px';
        mybody.style.height = h + 'px';
        //滑动处理
        var startX, startY, moveEndX, moveEndY, X, Y;   
        mySwiper.style.transform=`translate3d(${scrollW}px, 0px, 0px)`;
        mySwiper.addEventListener('touchstart', function(e) {
            e.preventDefault();
            startX = e.touches[0].pageX;
            startY = e.touches[0].pageY;
        }, false);
        mySwiper.addEventListener('touchmove', function(e) {
            e.preventDefault();
            moveEndX = e.changedTouches[0].pageX;
            moveEndY = e.changedTouches[0].pageY;
            X = moveEndX - startX;
            Y = moveEndY - startY;
            if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
                //console.log("向右");
                mySwiper.style.transform=`translate3d(${scrollW+X}px, 0px, 0px)`;
                if(X>80){
                    
                }
            }
            else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
                //console.log("向左");
                mySwiper.style.transform=`translate3d(${scrollW+X}px, 0px, 0px)`;
                if(Math.abs(X)>80){
                    
                }
            }
            else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
                //console.log("向下");
            }
            else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
                //console.log("向上");
            }
            else{
                //console.log("没滑动");
            }
        });
        mySwiper.addEventListener('touchend', function(e) {
            e.preventDefault();
            var isOnce=true;
            if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
                if(X>80){
                    if(scrollW>0){
                        mySwiper.style.transform=`translate3d(${scrollW}px, 0px, 0px)`;
                        return;
                    }
                    if(isOnce){
                        scrollW+=322;
                        isOnce=false;
                    }
                    mySwiper.style.transform=`translate3d(${scrollW}px, 0px, 0px)`;
                }else{
                    mySwiper.style.transform=`translate3d(${scrollW}px, 0px, 0px)`;
                }
            }else if( Math.abs(X) > Math.abs(Y) && X < 0) {
                 IF (the Math.abs (X-)> 80 ) {
                     IF (isOnce) { 
                        scrollW - = 322 ; 
                        isOnce = to false ; 
                    } 
                    // slid into the last 
                    IF ((the Math.abs (scrollW) 22 is * len +)> = mySwiper.clientWidth) { 
                        scrollW + = 322 ; 
                    } 
                    mySwiper.style.transform = `translate3d ($ {} scrollW PX, 0px, 0px)`; 
                } the else { 
                    mySwiper.style.transform =`translate3d(${scrollW}px, 0px, 0px)`;
                }
            }
            mySwiper.removeEventListener('touchmove',this,false);
            mySwiper.removeEventListener('touchend',this,false);
        });
    },
}
</script>
<style lang="scss" scoped>
.swiper{
    width:100%;
    height: 100%;
    overflow: hidden;
    background-color:#d1d1d1;
}
.swiper_lsc{
    width:100%;
    height: 100%;
    display: -webkit-box;
    overflow-x: scroll;
    -webkit-overflow-scrolling:touch;
    white-space: nowrap;
    transition-duration: 400ms;
    .swiper_box{
        width:6rem;
        display: inline-block;
        text-align: center;
        margin:0 0 0 0.44rem;
        background-color:#fff;
        border-radius:0.25rem;
    }
    &::-webkit-scrollbar{
    display:none;
    } 
}
</style>
To write a simple version of the swiper, later re-learning optimization

Guess you like
