[JavaScript知识库]Vue+js 实现左右拖动

<div class="wrap-4">
        <div class="wrap-4-card" v-on:touchstart="bannerTouchStart" v-on:touchend="bannerTouchEnd($event)" v-on:touchcancel="bannerTouchEnd($event)">
            <ul class="contentBox">
                <li class="wrap-4-pic wrap-4-pic1"></li>
                <li class="wrap-4-pic wrap-4-pic2"></li>
                <li class="wrap-4-pic wrap-4-pic3"></li>
            </ul>
        </div>
        <div class="circle-card">
            <div class="circle-item" :class="{'active':focusBannerIndex == 0}"></div>
            <div class="circle-item" :class="{'active':focusBannerIndex == 1}"></div>
            <div class="circle-item" :class="{'active':focusBannerIndex == 2}"></div>
        </div>
        <div class="wrap-button" @click="btnClick('点击咨询详情')">点击咨询详情</div>
    </div>

.wrap-4{
        height: 1365px;
        background: url($imageUrl + 'wrap-4.png') no-repeat center;
        background-size: cover;
        overflow: hidden;
        .wrap-4-card{
            position: absolute;
            left: 0;
            bottom: 226px;
            padding-left: 79px;
            box-sizing: border-box;
            font-size: 0;
            width: 100%;
            overflow: auto;
            ul{
                width: 1892px;
            }
            li{
                display: inline-block;
                width: 621px;
                height: 719px;
            }
            .wrap-4-pic1{
                background: url($imageUrl + 'wrap-4-pic1.png') no-repeat left center;
                background-size: 571px 100%;
            }
            .wrap-4-pic2{
                background: url($imageUrl + 'wrap-4-pic2.png') no-repeat left center;
                background-size: 571px 100%;
            }
            .wrap-4-pic3{
                background: url($imageUrl + 'wrap-4-pic3.png') no-repeat left center;
                background-size: 571px 100%;
            }
        }
        .circle-card{
            bottom: px;
            font-size: 0;
            text-align: center;
            .circle-item{
                display: inline-block;
                width: 12px;
                height: 12px;
                background: #C9CACC;
                border-radius: 50%;
                margin-right: 15px;
                &:last-child{
                    margin-right: 0;
                }
                &.active{
                    background: #FF8219;
                }
            }
        }
    }

Vue({
    el:"#intelligentHomework",
    data:{
        focusBannerIndex : 0,
        bannerList: 3,
    },
    computed: {
    },
    components: {},
    methods:{
        bannerMove(arrow){
            let vm = this;
            let focusBannerIndex = vm.focusBannerIndex;
            let bannerLen = vm.bannerList;
            let nextBannerIndex = vm.nextBannerIndex;
            if(bannerLen <= 1){
                return false;
            }
            switch (arrow) {
                case "right":
                    //向右滑动
                    nextBannerIndex = focusBannerIndex + 1 >= bannerLen ? bannerLen-1 : focusBannerIndex + 1;
                    break;
                case "left":
                    //向左滑动
                    nextBannerIndex = focusBannerIndex - 1 < 0 ? 0 : focusBannerIndex - 1;
                    break;
                default:
                    nextBannerIndex = 0;
            }
            vm.focusBannerIndex = nextBannerIndex;
            let scrollNumber = (nextBannerIndex*$('.wrap-4-pic').width())+'px';
            $('.wrap-4-card').animate({ 'scrollLeft': scrollNumber}, 200);
        },
        bannerTouchStart(e){
            let vm = this;
            e.preventDefault();
            vm.startPointY = (e.clientY || e.changedTouches[0].clientY);
            vm.startPointX = (e.clientX || e.changedTouches[0].clientX);
        },
        bannerTouchEnd(e){
            e.preventDefault();
            let vm = this;
            let startPointY = vm.startPointY;
            let startPointX = vm.startPointX;
            let endPointY = (e.clientY || e.changedTouches[0].clientY);
            let endPointX = (e.clientX || e.changedTouches[0].clientX);
            if(Math.abs(endPointY - startPointY)>Math.abs(endPointX - startPointX) || Math.abs(endPointX - startPointX) < 20){
                //认为没有滑动
                return false;
            }
            vm.bannerMove((endPointX > startPointX) ? "left":"right");
        },
    },
    created(){
    },
    mounted(){
    }
})