tab组件

四维虫子chenjd

已于 2022-05-20 18:06:34 修改

阅读量220

点赞数

文章标签： javascript

于 2022-04-25 17:53:51 首次发布

本文链接：https://blog.csdn.net/m0_51499501/article/details/124410807

版权

export default {
name: ‘SideMenu’,
data() {
return {
prev,
next,
oList: null,
oPrev: null,
oNext: null,
oListLi: null,
oListUl: null,
len2: 0,
index: 0,
num: 0,
num2: 0,
w2: 0
}
},
props: {},
mounted() {
this.init()
},
methods: {
init () {
const that = this
that.oList = that.getElement(“listBox”);
that.oPrev = that.getElement(“prev”);
that.oNext = that.getElement(“next”);
that.oListLi = that.oList.getElementsByTagName(“li”);
that.oListUl = that.oList.getElementsByTagName(“ul”)[0];

        that.len2 = that.oListLi.length;
        that.w2 = that.oListLi[0].offsetWidth;
        that.oListUl.style.width = that.w2 * that.len2 + "px";

        that.index = 0;
        that.num = 5;
        that.num2 = Math.ceil(that.num / 2);

        for (var i = 0; i < that.len2; i++) {
            that.oListLi[i].index = i;
            that.oListLi[i].onclick = function(){
                that.Change();
            }
        }
    },
    Animate(obj, json){
        const that = this
        if (obj.timer) {
            clearInterval(obj.timer);
        }
        obj.timer = setInterval(function () {
            for (var attr in json){
                var iCur = parseInt(that.getStyle(obj, attr));
                iCur = iCur ? iCur : 0;
                var iSpeed = (json[attr] - iCur) / 5;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                obj.style[attr] = iCur + iSpeed + 'px';
                if (iCur == json[attr]) {
                    clearInterval(obj.timer);
                }
            }
        }, 30);
    },
    getElement (s) {
        return document.getElementById(s);
    },
    getStyle (obj, attr) {
        if(obj.currentStyle) {
            return obj.currentStyle[attr];
        }else {
            return getComputedStyle(obj, false)[attr];
        }
    },
    Change () {
        const that = this
        if (that.index < that.num2){
            that.Animate(that.oListUl, { left: 0 });
        } else if(that.index + that.num2 <= that.len2){
            that.Animate(that.oListUl, { left: - (that.index - that.num2 + 1) * that.w2 });
        } else{
            that.Animate(that.oListUl, { left: - (that.len2 - that.num) * that.w2 });
        }

        for (var i = 0; i < that.len2; i++) {
           that.oListLi[i].className = "";
            if(i == that.index){
               that.oListLi[i].className = "on";
            }
        }
    },
    handlePrev () {
        const that = this
        that.index --;
        that.index = that.index == -1 ? that.len2 -1 : that.index;
        that.Change();
    },
    handleNext () {
        const that = this
        that.index ++;
        that.index = that.index == -1 ? that.len2 -1 : that.index;
        that.Change();
    }
}

}