原生JS选项卡(优化版)

浏览：547次- 评论：0次- 发布时间：2021-05-27

Html

Css


    
        模式一:基础tab点击切换
        
            
                
                
                    
                        111
                        111
                        111
                        111
                    
                    
                        222
                        111
                        111
                    
                    333
                
            
        
    


    
        模式二:点击过渡滑动切换动画
        
            
                
                
                    
                        111
                        111
                        111
                    
                    
                        222
                        111
                    
                    333
                
            
        
    


    
        模式三:1.滑动底部加载更多触发回调函数，2.点击选项卡触发回调函数
        
            
                
                
                    
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        上拉加载更多
                    
                    
                        222

                    
                    333
                
            
        
    



    
        模式四:自动切换tab，设置时间
        
            
                
                
                    
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        111
                        111

                    
                    
                        222

                    
                    333

;(function(global) {
    "use strict";
    let deferTimer;
    var M = function(el, options) {
        this.el = typeof el === "string" ? document.querySelector(el) : el;
        this.options = JSON.stringify(options) != '{}' ? options : false;
        if (this.options) {
            this.options.contentIndex = JSON.stringify(options) != '{}' ? 0 : false;
        };
        this.options && this.tabTitle();
    };
    M.prototype = {
        addtod: function() {
            console.log(this)
            return this
        },
        //样式设置
        setStyle: function(dom, objStyle) {
            for (var k in objStyle) {
                dom.style[k] = objStyle[k];
            };
        },
        // 初始化创建tab,并且绑定事件回调
        tabTitle: function() {
            let type = typeof this.options.Title[0];
            let _this = this;

for (var i = 0; i <= this.options.Title.length - 1; i++) {
                let li = document.createElement("li");
                li.start = i;

li.data = this.options.Title[i];
                var textnode = (type === 'string' && document.createTextNode(`${this.options.Title[i]}`)) || (type === 'object' && document.createTextNode(`${this.options.Title[i].name}`));
                li.onclick = function() {
                    _this.liEvent(this)
                };
                li.appendChild(textnode);
                this.el.appendChild(li);
            };

(this.options.defaultIndex && this.defaultIndexEvetn(this.options.defaultIndex - 1)) || (!this.options.defaultIndex && this.defaultIndexEvetn(0))

// 是否开启上拉监听
            typeof this.options.handleScroll === 'function' && this.options.content && this.MonitorBox();

// 是否开启自动切换
            this.options.automatic && this.options.automatic.open && this.switchAutomatic();
            // console.log(this)
        },
        liEvent(that) {
            if (this.options.contentIndex == that.start) {
                return;
            };
            for (var k = this.el.getElementsByTagName("li").length - 1; k >= 0; k--) {
                this.el.getElementsByTagName("li")[k].className = '';
            };
            this.options.contentIndex = that.start;
            this.options.MonitorSubscript = that.start;
            that.className = 'active';
            this.options.content && this.contentEvetn(that.start);
            this.options.titleEvent && this.options.titleEvent(that.data);
        },
        // 自动切换
        switchAutomatic() {
            let dataChildren = getChildren(this.el);
            let index = this.options.defaultIndex;
            let that = this;
            let time = Number(this.options.automatic.time) && this.options.automatic.time > 0 ? Number(this.options.automatic.time) : false;
            setInterval(function() {
                if (index == dataChildren.length) {
                    index = 0;
                };
                that.liEvent(dataChildren[index]);
                index++;
            }, time ? time : 2500);
        },
        // 默认展示第几项
        defaultIndexEvetn: function(activeDom) {
            let _this = this;
            this.el.getElementsByTagName("li")[activeDom].className = 'active';
            // 记录上次选项卡标题下标
            this.options.contentIndex = activeDom;
            let content = this.options.content ? document.getElementById(this.options.content) : false;

let dataChildren = content && getChildren(content);
            if (this.options.content && !this.options.transition) { //是否有内容容器切换，有就设置默认选项
                for (var i = 0; i < dataChildren.length; i++) {
                    dataChildren[i].style.cssText = `overflow-y: auto;`;
                };
                dataChildren[activeDom].style.display = 'block';
                // 记录上次展示的容器下标
                this.options.index = activeDom;

} else if (this.options.content && this.options.transition) {
                let w = this.el.offsetWidth;
                for (var i = 0; i < dataChildren.length; i++) {
                    dataChildren[i].style.display = 'block';
                    dataChildren[i].style.cssText = `width: ${w}px; float: left; padding: 0px; margin: 0px; vertical-align: top; display: table-cell;overflow-y: auto;`
                };

content.style.cssText = `overflow: hidden; position: relative;width: ${w*content.getElementsByTagName('div').length}px;transform: translate3d(-${w*activeDom}px, 0px, 0px);-webkit-transform: translate3d(-${w*activeDom}px, 0px, 0px);-o-transition:translate3d(-${w*activeDom}px, 0px, 0px);transition:translate3d(-${w*activeDom}px, 0px, 0px);`;
                let style = {
                    'transition': `all ${this.options.transitionTime||0.3}s ease-in-out 0s`,
                    '-webkit-transition': `all ${this.options.transitionTime||0.3}s ease-in-out 0s`,
                    '-o-transition': `all ${this.options.transitionTime||0.3}s ease-in-out 0s`,
                };
                this.setStyle(content, style);
                this.contentEvetn(activeDom);
                this.options.index = activeDom;
            };

// 是否开启上拉监听 开启后默认用户选中的tab
            (typeof this.options.handleScroll === 'function') && dataChildren && (dataChildren[activeDom].addEventListener('scroll', function() {
                _this.handleScroll.call(this, _this);
            }, true));
        },
        // 切换内容
        contentEvetn: function(index) {
            if (index == this.options.index) {
                return;
            };
            let content = document.getElementById(this.options.content);
            let content1 = getChildren(content);
            if (this.options.transition) {
                let w = this.el.offsetWidth;
                // 对当前5个版本做兼容
                let style = {
                    'transition': `all ${this.options.transitionTime||0.3}s ease-in-out 0s`,
                    '-webkit-transition': `all ${this.options.transitionTime||0.3}s ease-in-out 0s`,
                    '-o-transition': `all ${this.options.transitionTime||0.3}s ease-in-out 0s`,
                    'transform': `translate3d(-${w*index}px, 0px, 0px)`,
                    '-webkit-transform': `translate3d(-${w*index}px, 0px, 0px)`,
                };
                this.setStyle(content, style);
            } else {
                content1[this.options.index].style.display = 'none';
                content1[index].style.display = 'block';
            };
            this.options.index = index;
        },
        // 滚动监听
        handleScroll: function(that) {
            clearTimeout(deferTimer);
            deferTimer = setTimeout(() => {
                var scrollTop = this.scrollTop;
                //变量windowHeight是可视区的高度
                var windowHeight = this.clientHeight;
                //变量scrollHeight是滚动条的总高度
                var scrollHeight = this.scrollHeight;
                let scroll = {
                    scrollTop,
                    windowHeight,
                    scrollHeight
                };
                //滚动条到底部的条件
                if (scrollTop + windowHeight == scrollHeight) {
                    that.options.handleScroll(scroll);
                } else if ((parseInt(scrollTop) + 1) + windowHeight == scrollHeight) {
                    //这里在写一个判断是因为scrollTop到底部可能是小数 因此取整数
                    scroll.scrollTop = parseInt(scrollTop + 1)
                    that.options.handleScroll(scroll);
                };
            }, 350);
        }
    };
    // 上拉-监听
    M.prototype.MonitorBox = function() {
        let content = document.getElementById(this.options.content);
        let dataChildren = getChildren(content);
        let _this = this;
        Object.defineProperty(_this.options, 'MonitorSubscript', {
            get: function() {
                return MonitorSubscript
            },
            set: function(newValue) {
                dataChildren[newValue].addEventListener('scroll', function() {
                    _this.handleScroll.call(this, _this);
                }, true);
            }
        });
    };
    // 获取父下子第一级子元素
    function getChildren(obj) {
        var objChild = [];
        var objs = obj.getElementsByTagName('*');
        for (var i = 0, j = objs.length; i < j; ++i) {
            if (objs[i].nodeType != 1) {
                alert(objs[i].nodeType);
                continue;
            };
            var temp = objs[i].parentNode;
            if (temp.nodeType == 1) {
                if (temp == obj) {
                    objChild[objChild.length] = objs[i];
                };
            } else if (temp.parentNode == obj) {
                objChild[objChild.length] = objs[i];
            };
        };
        return objChild;
    };

if (typeof module !== 'undefined' && module.exports) module.exports = M;
    if (typeof define === 'function') define(function() {
        return M;
    });
    global.tabBar = M;

})(this);

// 模式一
let a1 = new tabBar("#tabClick", {
    Title: [{
            name: 'Tab1',
            id: 1
        },
        {
            name: 'Tab2',
            id: 2
        },
        {
            name: 'Tab3',
            id: 3
        }
    ], //选卡标题数据格式Title:['首页']/或者Title:[{name:'首页'}]
    content: 'content',
});
// 模式二
let a2 = new tabBar("#tabClick1", {
    Title: [{
            name: 'Tab1',
            id: 1
        },
        {
            name: 'Tab2',
            id: 2
        },
        {
            name: 'Tab3',
            id: 3
        }
    ], //选卡标题数据格式Title:['首页']/或者Title:[{name:'首页'}]
    content: 'content1',
    transition: true,
    transitionTime: 0.4
});

// 模式四
let a4 = new tabBar("#tabClick3", {
    Title: [{
            name: 'Tab1',
            id: 1
        },
        {
            name: 'Tab2',
            id: 2
        },
        {
            name: 'Tab3',
            id: 3
        }
    ], //选卡标题数据格式Title:['首页']/或者Title:[{name:'首页'}]
    content: 'content3',
    transition: true,
    defaultIndex: 1,
    automatic: {
        open: true,
        time: 1000
    }
});

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：1.分页加载事件回调.2.切换动画.3.自动切换设置时间.4.监听标题点击事件回调

/**
* @overview
* 选项卡功能包括 
*         1.tabbar切换
*         2.默认展示具体第几项
*         3.上拉底部加载更多事件回调触发
*         4.切换选项卡过渡动画设置
* 设置参数
* @param title :[string,string]/[{name:'value'}] 设置tab切换按钮标题
*           content :string 切换内容父级容器id节点名称
*           defaultindex :number 默认选中第几项
*           titleevent :eventhandle 点击选项卡事件回调
*           transition :boolean 是否开启切换过度动画,默认0.3s
*           handlescroll :eventhandle 当前容器上拉滚动条到底部监听
*           transitiontime :number 设置过渡动画时间
*automatic:{//设置自动切换 
    open:true,//打开自动切换，默认时间
    time:1000//自定义时间
}
*/

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取