zoukankan      html  css  js  c++  java
  • jqweui 中的tabbar导航

    最近做微信的服务号项目,用的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;
    	} /*
    

      

  • 相关阅读:
    java 上传图片
    getElementById 鼠标经过字体改变颜色
    getElementById 学习
    css的绝对定位与相对定位
    关于For循环
    扩展方法的应用
    关于Function 的学习笔记
    <a>标签中查找文件的方法
    关于Name ID class属性的区别
    使用float设置经典的网站前端结构
  • 原文地址:https://www.cnblogs.com/hjj2ldq/p/8244497.html
Copyright © 2011-2022 走看看