原生js选项卡

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

ul,li {
	list-style:none;
	flex:1;
	text-align:center;
	cursor:pointer;
	padding:5px 0;
}
ul {
	display:flex;
	margin:0;
	padding:0;
}
.div {
	width:100%;
	overflow:hidden;
	background-color:#80b600;
}
.active {
	background-color:#80b600;
	color:#ffffff;
}
#tabClick {
	background-color:#f5f5f5;
	color:#80b600;
}
#content>div {
	display:none;
	height:200px;
}
#tabClick1 {
	background-color:#f5f5f5;
	color:#80b600;
}
#content1>div {
	display:none;
	height:200px;
}
#tabClick2 {
	background-color:#f5f5f5;
	color:#80b600;
}
#content2>div {
	display:none;
	height:200px;
}
#tabClick3 {
	background-color:#f5f5f5;
	color:#80b600;
}
#content3>div {
	display:none;
	height:200px;
}
/* ------------ */
		.box {
	display:flex;
	justify-content:center;
}
h2 {
	text-align:center;
}

;(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 sum  = 4;
            // let chk = this.options.ShowAFew%2 == 0?1:2;//true是偶数/false是奇数

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

// li.sum = ((this.el.offsetWidth/this.options.ShowAFew)*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.el.scrollLeft =this.sum-this.offsetWidth*chk;
                    if (_this.options.contentIndex == this.start) {
                        return;
                    };
                    for (var k = 0; k <= _this.el.getElementsByTagName("li").length - 1; k++) {
                        _this.el.getElementsByTagName("li")[k].className = '';
                    };
                    _this.options.contentIndex = this.start;
                    _this.options.MonitorSubscript = this.start;
                    this.className = 'active';
                    _this.options.content && _this.contentEvetn(this.start);
                    _this.options.titleEvent && _this.options.titleEvent(this.data);
                };
                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();
        },
        // 默认展示第几项
        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.el.scrollLeft = ((this.el.offsetWidth/this.options.ShowAFew)*(this.options.ShowAFew%2 == 0?activeDom-0.5:activeDom))-this.el.getElementsByTagName("li")[activeDom].offsetWidth*(this.options.ShowAFew%2 == 0?1:2);
                // 记录上次展示的容器下标
                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;
            };

// let dataChildren = typeof this.options.handleScroll ==='function' && getChildren(content);
            // 是否开启上拉监听 开启后默认用户选中的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(() => {
                // let add = function(){
                // 	return this
                // };
                // add.call(M.prototype.addtod())
                // console.log(M.prototype.addtod())
                // console.log(add.options)

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
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生js选项卡



代码描述：集动画切换分页加载事件监听回调

更新时间：2021-04-13 02:35:54
/**
* @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 设置过渡动画时间
*/

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

style

相关代码

模式一:基础tab点击切换

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

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

原生js选项卡

最新