weui 中的tabbar导航

Posted 2020-10-20 韩金金金

最近做微信的服务号项目，用的jqweui作为主要的ui，但是对于用惯了ele ui的开发者来说，文档貌似有点不友好。真是很让人头疼！

所以结合着自己做的项目，随便写一点东西。

比如说，tabbar导航的切换。官网给说的对应的文档如下图：

 从我个人角度而言，实在不能短时间能看出来具体的用法。

还是直接晒一下用法吧！

　　　　　　　　<div id="tab-home" class="weui-tabbar">
			<a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
				<div class="weui-tabbar__icon">
					<i class="icon tabbar-icon-home"></i>
				</div>
				<p class="weui-tabbar__label">首页</p>
			</a>
			<a href="javascript:;" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="icon tabbar-icon-order"></i>
				</div>
				<p class="weui-tabbar__label">订单</p>
			</a>
			<a href="javascript:;" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="icon tabbar-icon-me"></i>
				</div>
				<p class="weui-tabbar__label">我的</p>
			</a>
	     </div>
 //像如下的这种用法其实可以直接写在官网的api里的，多的就不吐槽了。
	weui.tab(\'#tab-home\', {
		defaultIndex: 0,
		onChange: (index) => {
			if(index === 0) {//jump是封装好的更改location的值，就是一个跳转函数。
				jump(\'//html/index.html\');
			} else if(index === 1) {
				jump(\'//html/order/order-index.html\');
			} else if(index === 2) {
				jump(\'//html/member/me-index.html\');
			}
		}
	});

　可以从weui.js里看到tab函数，其实就是一个封装好的选项卡切换函数。

function tab(selector) {
	    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
	    var $eles = (0, _util2.default)(selector);
	    options = _util2.default.extend({
	        defaultIndex: 0,
	        onChange: _util2.default.noop
	    }, options);

	    $eles.forEach(function (ele) {
	        var $tab = (0, _util2.default)(ele);
	        var $tabItems = $tab.find(\'.weui-navbar__item, .weui-tabbar__item\');
	        var $tabContents = $tab.find(\'.weui-tab__content\');

	        $tabItems.eq(options.defaultIndex).addClass(\'weui-bar__item_on\');
	        $tabContents.eq(options.defaultIndex).show();

	        $tabItems.on(\'click\', function () {
	            var $this = (0, _util2.default)(this),
	                index = $this.index();

	            $tabItems.removeClass(\'weui-bar__item_on\');
	            $this.addClass(\'weui-bar__item_on\');

	            $tabContents.hide();
	            $tabContents.eq(index).show();

	            options.onChange.call(this, index);
	        });
	    });

	    return this;
	} /*