一段代码阐述一个轮播思路

时间 2020-06-15

标签一段代码阐述一个思路繁體版

原文原文链接

一段代码阐述一个轮播思路

不BB，直接上代码：

1. if (direction === 'next') {
2.     this.index = nextIndex;
3.     /*若是是下一个，那就先吧下个的dom设置成none来移动位置，防止用户看到*/
4.     nextEl.style.display = 'none';
5.     nextEl.style.webkitTransition = '';
6.     currentEl.style.display = 'block';
7.     currentEl.style.webkitTransition = '-webkit-transform ' + this.speed + 'ms ease-in-out';
8.     setTimeout(()=> {
9.         /*将下个放到指定的位置*/
10.         nextEl.style.webkitTransform = this.toward === 'horizontal' ? `translate3d(100%, 0, 0)` : `translate3d(0, 100%, 0)`;
11.         nextEl.style.display = 'block';
12.         nextEl.style.webkitTransition = '-webkit-transform ' + this.speed + 'ms ease-in-out';
13.         setTimeout(() => {
14.             /*开始轮播*/
15.             currentEl.style.webkitTransform = this.toward === 'horizontal' ? `translate3d(-100%, 0, 0)` : `translate3d(0, -100%, 0)`;
16.             nextEl.style.webkitTransform = `translate3d(0, 0, 0)`;
17.         }, 20);
18.     }, 10);
19. }

注意：以上只是主思路代码，完整的代码解读完以后会贴出来供你们参考。vue

代码解读：思路是先判断滚动方向，若是是向下一个节点那我就准备下一个节点到指定位置（仅适合界面一次展现一个轮播节点），若是直接移动到指定位置确定是不合理的，由于节点直接移动会让用户在浏览器界面看到，但是节点是确定要移动啊，思路很简单，那我给节点穿一件隐身衣（display:none）,以后再移动到指定位置用户不就看不到了，可是注意这里存在一个问题，若是直接设置设置display：none以后立马就移动位置的话会存在一个问题，移动的效果用户仍然能看的到，这是由于非异步的JS代码在执行的过程当中是会阻止浏览器的绘图和重绘的，因此为了绕开浏览器这个机制那就使用异步好了（setTimeout）,下一个节点的位置如今已经准备好了，如今若是仍是直接移动的话，又会存在一个问题下一个节点居然看不到移动，这是由于咱们在准备节点的节点的时候已经将它隐藏了，因此为了让用户看到就不得不把隐身衣脱了（display:block）才行，这样又得加一个异步（setTimeout）才能生效了，如今就能够安心的执行当前节点和早已就绪的下一个节点了。web

完整代码以下：

下面的轮播JS部分的代码是vue写的，主要功能包括了垂直轮播，水平轮播，手势轮播等几个轮播的主要功能浏览器

export default {
    name: 'swipe',
    props: {
        /*默认是水平滚动*/
        toward: {
            type: String,
            default: 'vertical'
        },
        /*是否展现指示标志*/
        showIndicators: {
            type: Boolean,
            default: true
        },
        /*滚动速度*/
        speed: {
            type: Number,
            default: 300
        },
        /*默认下标从哪儿开始*/
        defaultIndex: {
            type: Number,
            default: 0
        },
        /*自动滚动间隔*/
        interval: {
            type: Number,
            default: 3000
        }
    },
    data() {
        return {
            dots: [],    // 页面标记圆点
            index: this.defaultIndex,   //当前页面的下标
            pageEls: [],   // 全部的子轮播项集合
            timer: null, //轮播定时器对象
            noSwipe: false,  //禁止滚动
            startPosition: '',  //touch的起始位置
            currentPosition: '',  //touch的目前位置
            translatePosition: '',  //touch位移的位置
            distance: 10,    //touch的位移大于10的时候生效
        }
    },
    watch: {},
    beforeMount: function () {
    },
    mounted(){
        this.initSwipe();
        this.swipeTimeout();
        this.initTouchEvent();
    },
    computed: {
        getNum(){
            return this.pageEls.length;
        },
    },
    methods: {
        /*手动上一张*/
        prev(){
            window.clearTimeout(this.timer);
            this.swipeTimeout('prev');
        },
        /*手动下一张*/
        next(){
            window.clearTimeout(this.timer);
            this.swipeTimeout('next');
        },
        initTouchEvent(){
            let dom = this.$el.querySelector('.swipe-warp');
            dom.addEventListener('touchstart', this.handleTouchStart);
            dom.addEventListener('touchmove', this.handleTouchMove);
            dom.addEventListener('touchend', this.handleTouchEnd);
            console.log(dom);
        },
        /*初始化轮播节点*/
        initSwipe(){
            var children = this.$children;
            if (children.length === 1) {
                this.noSwipe = false;
                return;
            }
            children.forEach((child, _index)=> {
                this.pageEls.push(child.$el);
            });
        },
        /*定时轮播*/
        swipeTimeout(toward = 'next'){
            this.translate(toward, ()=> {
                this.timer = window.setTimeout(()=> {
                    this.swipeTimeout('next');
                }, this.interval);
            });
        },
        /*滚动方法*/
        translate(direction = 'next', cb){
            let length = this.pageEls.length;
            let currentIndex = this.index;
            let currentEl = this.pageEls[currentIndex];
            let nextIndex = ((this.index + 1) > (length - 1)) ? 0 : (this.index + 1);
            let nextEl = this.pageEls[nextIndex];
            let pervIndex = (this.index - 1) < 0 ? (length - 1) : (this.index - 1);
            let pervEl = this.pageEls[pervIndex];
            if (direction === 'next') {
                this.index = nextIndex;
                /*若是是下一个，那就先吧下个的dom设置成none来移动位置，防止用户看到*/
                nextEl.style.display = 'none';
                nextEl.style.webkitTransition = '';
                currentEl.style.display = 'block';
                currentEl.style.webkitTransition = '-webkit-transform ' + this.speed + 'ms ease-in-out';
                setTimeout(()=> {
                    /*将下个放到指定的位置*/
                    nextEl.style.webkitTransform = this.toward === 'horizontal' ? `translate3d(100%, 0, 0)` : `translate3d(0, 100%, 0)`;
                    nextEl.style.display = 'block';
                    nextEl.style.webkitTransition = '-webkit-transform ' + this.speed + 'ms ease-in-out';
                    setTimeout(() => {
                        /*开始轮播*/
                        currentEl.style.webkitTransform = this.toward === 'horizontal' ? `translate3d(-100%, 0, 0)` : `translate3d(0, -100%, 0)`;
                        nextEl.style.webkitTransform = `translate3d(0, 0, 0)`;
                    }, 20);
                }, 10);
            } else {
                this.index = pervIndex;
                /*若是是上一个，那就先吧上个的dom设置成none来移动位置，防止用户看到*/
                pervEl.style.display = 'none';
                pervEl.style.webkitTransition = '';
                currentEl.style.display = 'block';
                currentEl.style.webkitTransition = '-webkit-transform ' + this.speed + 'ms ease-in-out';
                setTimeout(()=> {
                    /*将上个放到指定的位置*/
                    pervEl.style.webkitTransform = this.toward === 'horizontal' ? `translate3d(-100%, 0, 0)` : `translate3d(0, -100%, 0)`;
                    pervEl.style.display = 'block';
                    pervEl.style.webkitTransition = '-webkit-transform ' + this.speed + 'ms ease-in-out';
                    setTimeout(() => {
                        /*开始轮播*/
                        currentEl.style.webkitTransform = this.toward === 'horizontal' ? `translate3d(100%, 0, 0)` : `translate3d(0, 100%, 0)`;
                        pervEl.style.webkitTransform = `translate3d(0, 0, 0)`;
                    }, 20);
                }, 10);
            }
            this.once(currentEl, 'webkitTransitionEnd', ()=> {
                cb && cb();
            });
        },
        handleTouchStart($evnet){
            this.startPosition = this.toward === 'horizontal' ? $evnet.touches[0].clientX : $evnet.touches[0].clientY;
        },
        handleTouchMove($evnet){
            this.currentPosition = this.toward === 'horizontal' ? $evnet.touches[0].clientX : $evnet.touches[0].clientY;
            this.translatePosition = this.currentPosition - this.startPosition;
            this.translatePosition !== 0 && window.clearTimeout(this.timer);
            $evnet.preventDefault();
            $evnet.stopPropagation();
        },
        handleTouchEnd($evnet){
            this.translatePosition < 0 && this.translatePosition < -this.distance && this.swipeTimeout('next');
            this.translatePosition > 0 && this.translatePosition > this.distance && this.swipeTimeout('prev');
        },
        /*管理事件*/
        once(el, event, fn) {
            var that = this;
            var listener = function () {
                if (fn) {
                    fn.apply(this, arguments);
                }
                that.off(el, event, listener);
            };
            this.on(el, event, listener);
        },
        /*监听事件*/
        on(element, event, handler){
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            }
        },
        /*移除事件*/
        off(element, event, handler) {
            if (element && event) {
                element.removeEventListener(event, handler, false);
            }
        }
    }
};