gx

queenwuli

2021-01-28 b83ba3cc4687f21d744e9866e10e30e91229e8a4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
(function(window, document) {
    var TabBar = function(options) {
        options = options || {};
 
        this.tabClass = options.tabClass || 'tab'; //容器元素
        this.itemClass = options.itemClass || 'tab-item'; //选项样式名称
        this.selectedClass = options.selectedClass || 'active'; //选项激活样式名称
 
        this.itemIconClass = options.itemIconClass || 'tab-item-icon'; //选项图标样式名称
        this.itemLabelClass = options.itemLabelClass || 'tab-item-label'; //选项标题样式名称
 
        this.list = options.list || []; //选项列表
 
        this.selected = 0;
 
        if (this.list.length) {
            this.render();
        }
 
        this.tabElem = document.querySelector('.' + this.tabClass);
        this.itemElems = [].slice.call(document.querySelectorAll('.' + this.itemClass));
 
        this.handleOldVersion();
 
        this.initEvent();
 
    };
    var proto = TabBar.prototype;
 
    proto.refresh = function() {
        this.itemElems = [].slice.call(document.querySelectorAll('.' + this.itemClass));
    };
 
    proto.handleOldVersion = function() {
        var list = this.list;
        if (!list.length) {
            for (var i = 0; i < this.itemElems.length; i++) {
                list.push({
                    url: this.itemElems[i].getAttribute('href')
                });
            }
        }
        window.__wap2app_old_tab_item_urls = [];
        for (var i = 0; i < list.length; i++) {
            __wap2app_old_tab_item_urls.push(list[i].url);
        }
    };
    proto.render = function() {
        var tabbarElem = document.createElement('nav');
        tabbarElem.className = this.tabClass;
        if (!this.list[0].iconPath) {
            tabbarElem.className = tabbarElem.className + ' no-icon';
        }
        if (!this.list[0].text) {
            tabbarElem.className = tabbarElem.className + ' no-label';
        }
        var html = [];
        for (var i = 0; i < this.list.length; i++) {
            html.push(this.renderItem(this.list[i], i));
        }
        tabbarElem.innerHTML = '<div class="' + this.tabClass + '-inner">' + html.join('') + '</div>';
        document.body.appendChild(tabbarElem);
    };
    proto.renderItem = function(item, index) {
        var isSelected = this.selected === index;
        var html = ['<div class="' + this.itemClass + (isSelected ? (' ' + this.selectedClass) : '') + '" href="' + item.url + '">'];
        if (item.iconPath) {
            html.push('<div class="' + this.itemIconClass + '"><img src="' + item.iconPath + '"/><img src="' + item.selectedIconPath + '"/></div>');
        }
        if (item.text) {
            html.push('<div class="' + this.itemLabelClass + '">' + item.text + '</div>');
        }
        html.push('</div>');
        return html.join('');
    };
    proto.initEvent = function() {
        if (!this.tabElem) {
            throw new Error('未找到TabBar容器');
        }
        if (!this.itemElems || !this.itemElems.length) {
            throw new Error('TabBar容器内无选项');
        }
        var self = this;
        //全局回调
        window.__wap2app_change_tab_callback = function(e) {
            self.highlight(e.index);
        };
 
        this.tabElem.addEventListener('click', function(e) {
            var target = e.target;
            for (; target && target !== self.tabElem; target = target.parentNode) {
                var index = self.itemElems.indexOf(target);
                if (~index) {
                    if (index === self.selected) {
                        return;
                    }
                    e.preventDefault();
                    e.stopPropagation();
                    var url = target.getAttribute('href');
                    if (!url) {
                        throw new Error('未指定选项打开的链接地址');
                    }
                    self.highlight(index);
                    var id = plus.runtime.appid;
                    wap2app.switchTab(id, id + '_' + index, url);
                }
            }
        });
    };
    proto.highlight = function(index) {
        this.itemElems[this.selected].classList.remove(this.selectedClass);
        var currentItemElem = this.itemElems[index]
        currentItemElem.classList.add(this.selectedClass);
        if (currentItemElem.scrollIntoView) {
            currentItemElem.scrollIntoView();
        }
        this.selected = index;
    };
    window.TabBar = TabBar;
})(window, document);