一些小优化

demo/index.html

@@ -197,7 +197,7 @@
    </div>
    <div class="ui-col ui-col-auto">
        <nav class="ui-navbar ui-navbar-ipu ui-border-t">
        <nav class="ui-navbar ">
            <a class="ui-navbar-item " href="javascript:;">
                <span class="ui-icon fa fa-home"></span>
                <span class="ui-navbar-item-label">插件</span>

demo/js/require-config.js

@@ -6,7 +6,7 @@
 * 3.如果以"http:"或者"https:"开头
 */
require.config({
    baseUrl:'js', //也是个相对路径？是的,看你的写法 ../demo/js
    baseUrl:'/demo/js', //也是个相对路径？是的,看你的写法 ../demo/js
    //指定别名. zepto.event如果不使用引号,会导致异常
    paths:{
        'iScroll':'lib/iscroll/iscroll',

demo/static/component/category.html

@@ -27,52 +27,54 @@
            <div class="demo-block">
                <div class="ui-category">
                    <a href="javascript:;" class="ui-category-item  ">
                            <span class="ui-category-icon ui-color-1">
                            <span class="ui-category-icon ui-bg-color-1">
                                <span class="ui-icon fa fa-calendar"></span>
                            </span>
                        流量专区
                        <span class="ui-category-label">流量专区</span>
                    </a>
                    <a href="javascript:;" class="ui-category-item">
                            <span class="ui-category-icon ui-color-2">
                            <span class="ui-category-icon ui-bg-color-2">
                                <span class="ui-icon fa fa-plus"></span>
                            </span>
                        话费服务
                        <span class="ui-category-label">话费服务</span>
                    </a>
                    <a href="javascript:;" class="ui-category-item">
                            <span class="ui-category-icon ui-color-3">
                            <span class="ui-category-icon ui-bg-color-3">
                                <span class="ui-icon fa fa-adjust"></span>
                            </span>
                        账单查询
                        <span class="ui-category-label">账单查询</span>
                    </a>
                    <a href="javascript:;" class="ui-category-item">
                            <span class="ui-category-icon ui-color-4">
                            <span class="ui-category-icon ui-bg-color-4">
                                <span class="ui-icon fa fa-address-book"></span>
                            </span>
                        手机充值
                        <span class="ui-category-label">手机充值</span>
                    </a>
                    <a href="javascript:;" class="ui-category-item">
                            <span class="ui-category-icon ui-color-5">
                            <span class="ui-category-icon ui-bg-color-5">
                                <span class="ui-icon fa fa-amazon"></span>
                            </span>
                        积分兑换
                        <span class="ui-category-label">积分兑换</span>
                        <div class="ui-badge-cornernum">2</div>
                    </a>
                    <a href="javascript:;" class="ui-category-item">
                            <span class="ui-category-icon ui-color-6">
                            <span class="ui-category-icon ui-bg-color-6">
                                <span class="ui-icon fa fa-anchor"></span>
                            </span>
                        营业厅查询
                        <span class="ui-category-label">营业厅查询</span>
                        <div class="ui-badge-cornernum">12</div>
                    </a>
                    <a href="javascript:;" class="ui-category-item">
                            <span class="ui-category-icon ui-color-7">
                            <span class="ui-category-icon ui-bg-color-7">
                                <span class="ui-icon fa fa-angle-right"></span>
                            </span>
                        业务大全
                        <span class="ui-category-label">业务大全业务大全业务大全</span>
                    </a>
                    <a href="javascript:;" class="ui-category-item">
                            <span class="ui-category-icon ui-color-8">
                                <span class="ui-icon fa fa-android"></span>
                            </span>
                        更多
                        <span class="ui-category-icon ui-bg-color-8">
                            <i class="ui-icon fa fa-android"></i>
                        </span>
                        <span class="ui-category-label">更多</span>
                    </a>
                </div>
            </div>

demo/static/text.html

@@ -14,8 +14,12 @@
<div class="ui-row-flex ui-row-flex-ver">
    <div class="ui-col ui-col-auto">
        <header class="ui-toolbar">
            <a class="ui-icon fa fa-chevron-left ui-fn-left" href="javascript:history.back(-1);"></a>
            <a class="ui-icon fa fa-home ui-fn-right" href="../index.html"></a>
            <a class="ui-fn-left" href="javascript:history.back(-1);">
                <i class="ui-icon fa fa-chevron-left"></i>
            </a>
            <a class="ui-fn-right" href="../index.html">
                <i class="ui-icon fa fa-home"></i>
            </a>
            <h1 class="ui-toolbar-title">文本</h1>
        </header>
    </div>
@@ -47,20 +51,22 @@
            <div class="demo-item">
                <p class="demo-desc">文本颜色</p>
                <div class="demo-block">
                    <div class="ui-whitespace">
                        <p class="ui-txt-black">黑色 #000</p>
                        <p class="ui-txt-dark">深黑 #333</p>
                        <p class="ui-txt-default">默认文本色 #666，同body字体颜色</p>
                        <p class="ui-txt-gray">灰色 #999</p>
                        <p class="ui-txt-light">浅色 #ccc</p>
                        <p class="ui-txt-white" style="background-color: #000">白色 #fff</p>
                        <p class="ui-txt-primary">主题色</p>
                        <p class="ui-txt-highlight">高亮</p>
                        <p class="ui-txt-warning">警示</p>
                        <p class="ui-txt-success">成功</p>
                        <p><a href="javascript:;">默认链接颜色，同主题色</a></p>
                    </div>
                    <p class="ui-txt-black">黑色 #000</p>
                    <p class="ui-txt-dark">深黑 #333</p>
                    <p class="ui-txt-default">默认文本色 #666，同body字体颜色</p>
                    <p class="ui-txt-gray">灰色 #999</p>
                    <p class="ui-txt-light">浅色 #ccc</p>
                    <p class="ui-txt-white" style="background-color: #000">白色 #fff</p>
                </div>
             </div>
            <div class="demo-item">
                <p class="demo-desc">文本情景色</p>
                <div class="demo-block">
                    <p class="ui-txt-primary">主题色</p>
                    <p class="ui-txt-highlight">高亮</p>
                    <p class="ui-txt-warning">警示</p>
                    <p class="ui-txt-success">成功</p>
                    <p><a href="javascript:;">默认链接颜色，同主题色</a></p>
                </div>
            </div>
        </section>

src/js/picker.js

@@ -43,7 +43,7 @@
        this.hammer.on("panstart panmove panend pancancel", Hammer.bindFn(this._onPan, this));
        this.hammer.on("press pressup", function (e) {  // 如果用户点击了，是停止自动滚动
            console.log('press');
           // console.log('press');
            if(this.empty){
                return ;
            }
@@ -125,7 +125,7 @@
            this.lastAngle = this.angle;
            this.wrap.addClass("ui-noanimate");    // 移除动画
            this.stopInertiaMove = true; //  停止自动减速滚动
            console.log('panstart');
           // console.log('panstart');
        } else if (ev.type == 'panmove') {
            var moveAngle = this.calcAngle(ev.deltaY);
@@ -141,7 +141,7 @@
            this.setAngle(newAngle);
        } else { // end or cancel事件
            console.log('end or cancel:' + ev.type);
            // console.log('end or cancel:' + ev.type);
            var v = ev.overallVelocityY;    // 滑动的速度
            var dir = v > 0 ? -1 : 1; //加速度方向
            var deceleration = dir * 0.0006 * -1;
@@ -150,7 +150,7 @@
            var startAngle = this.angle;
            var distAngle = -this.calcAngle(dist);
            console.log("dist=" + dist + ", distAngle" + distAngle);
           //  console.log("dist=" + dist + ", distAngle" + distAngle);
            //----
            var srcDistAngle = distAngle;
@@ -192,9 +192,9 @@
            // 这个地方要判断下，数据更新或索引更新都要触发
            if (oldIndex != index || this.newData) {
                this.newData = false;
                console.log('change');
               // console.log('change');
                if (this.options.onChange && this.listen) {
                    console.log('changed call');
                    // console.log('changed call');
                    this.options.onChange(this.getSelectedItem(), this.index, oldIndex, this.newData);
                }
            }

src/sass/ipu/base/function.scss

@@ -40,28 +40,52 @@
    border: 1px solid $c-element-bd;
}
.ui-color-1{
.ui-bg-color-1{
    background: $txt-color-1;
}
.ui-color-2{
.ui-bg-color-2{
    background: $txt-color-2;
}
.ui-color-3{
.ui-bg-color-3{
    background: $txt-color-3;
}
.ui-color-4{
.ui-bg-color-4{
    background: $txt-color-4;
}
.ui-color-5{
.ui-bg-color-5{
    background: $txt-color-5;
}
.ui-color-6{
.ui-bg-color-6{
    background: $txt-color-6;
}
.ui-color-7{
.ui-bg-color-7{
    background: $txt-color-7;
}
.ui-color-8{
.ui-bg-color-8{
    background: $txt-color-8;
}
.ui-text-color-1{
    color: $txt-color-1;
}
.ui-text-color-2{
    color: $txt-color-2;
}
.ui-text-color-3{
    color: $txt-color-3;
}
.ui-text-color-4{
    color: $txt-color-4;
}
.ui-text-color-5{
    color: $txt-color-5;
}
.ui-text-color-6{
    color: $txt-color-6;
}
.ui-text-color-7{
    color: $txt-color-7;
}
.ui-text-color-8{
    color: $txt-color-8;
}

src/sass/ipu/base/mixin.scss

@@ -107,6 +107,7 @@
@mixin nowrap {
    //max-width: 100%; 看是否需要
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

src/sass/ipu/base/rem.scss

@@ -4,4 +4,6 @@
@include queryWidth(375,384);
@include queryWidth(384,400);
@include queryWidth(400,414);
@include queryWidth(414,-1);
@include queryWidth(414,480);
@include queryWidth(480,640);
@include queryWidth(640,-1);

src/sass/ipu/component/badge.scss

@@ -44,7 +44,6 @@
    height: .19rem;
    line-height: .19rem;
    font-size: .12rem;
    min-width: .19rem;
    border-radius: .1rem;
    top: -.05rem;
    right: -.05rem;

src/sass/ipu/component/category.scss

@@ -28,12 +28,19 @@
    width: $s-category-icon;
    height: $s-category-icon;
    margin: .08rem auto;
    color: $c-category;
    position: relative;
}
.ui-category-icon .ui-icon{
.ui-category .ui-category-label {
    @include nowrap();
}
.ui-category-item .ui-icon{
    color: $c-primary-positive;
    display: block;
    line-height: $s-category-icon;
    font-size: .32rem;
}
.ui-category-item  .ui-badge-cornernum{
    top:10%;
    left:65%;
    right: auto;
}

src/sass/ipu/component/navbar.scss

@@ -1,6 +1,7 @@
.#{$g-prefix}navbar {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    box-sizing: border-box;
    padding: 0;

src/sass/ipu/component/toolbar.scss

@@ -70,6 +70,7 @@
.#{$g-prefix}mtab{
    position: relative;
    display: table;
    table-layout: fixed;
    overflow: hidden;
}
// 目前不支持超出时，自动忽略等