jqweui 中的tabbar導航

最近作微信的服務號項目,用的jqweui做爲主要的ui,可是對於用慣了ele ui的開發者來講,文檔貌似有點不友好。真是很讓人頭疼!javascript

因此結合着本身作的項目,隨便寫一點東西。html

好比說,tabbar導航的切換。官網給說的對應的文檔以下圖:java

 從我我的角度而言,實在不能短期能看出來具體的用法。api

仍是直接曬一下用法吧!微信

        <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函數,其實就是一個封裝好的選項卡切換函數。ide

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;
	} /*
相關文章
相關標籤/搜索