nutui/src/packages/scroller/scroller.scss

@import "../../styles/animation/rotate";

.nut-scroller{
    display: flex;
    height: 100%;
    img{
        display: block;
        height: 100%;
        width: 100%;
        background-image: url(../../assets/img/img-loading.png);
    }
    img, .load-err{
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 50%;
    }
    .load-err{
        background-image: url(../../assets/img/img-error.png);
    }
}
// 横向滚动 
.nut-hor-scroll{
    height: 100%;
    width: 100%;
    overflow: hidden;
    .nut-hor-list{
        height: 100%;
        display: flex;
        flex-direction: row;
        box-orient: horizontal;
        box-direction: normal;
    }
    .nut-hor-control{
        height: 100%;
    }
}

// 竖向滚动
.nut-vert-scroll{
    flex: 1;
    overflow: hidden;
    .nut-vert-list{
        width: 100%;
        position: relative;
    }
    .nut-vert-pulldown{
        position: absolute;
        top: -50px;
        width: 100%;
    }
    .nut-vert-loadmore, .nut-vert-pulldown, .nut-vert-unloadmore{
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 12px;
        color: $text-color;
        .nut-vert-pulldown-status, .nut-vert-loadmore-status{
            height: 50px;
        }
        .nut-vert-loading{
            height: 20px;
            width: 20px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAP1BMVEUAAAD0KA/xJhHxJA7yJA7xJA7xJA7xJA7xJA7wJA7xJA7xJA7xJA7xJA7xJA7xJA3xJA7xJA7xJA7xJA7xJA5JCyllAAAAFXRSTlMACxdEI3NalDdn3LyvLstPoveIgOl7Sm+EAAABiklEQVRIx9XS0W7kIAxAUWyDwckAIfD/37owUyndbbMJrtSq92UeoiMbGHMWRqKciSKamSw5v23b462d7T0HVIc76NrbGK8h+153vgozi9u39ZW7wOSfSYB3pyY3JqdV4ByiG86FTw6xrSmlx+mZ4757X8PJPo/Uo5OPe4/MaTwGy6dfOvz/VeAY7OGjrPvOcHH9PqXFf9i21krmMrcsi/vnhg55bfPfr1Irm1v5bqM5ElcF7lFYl2WF46DOOTA3w/TuuNBlMLeTvjIeQ8XcD9LS9mOoNRPl1t7GBufYTLW29jotP4dOjk2mhyJi5oKltfG2UYTMZL4VN6aL2FnKpTzGjwjMUiyl9b1F2Ey3lILjlvI8XUshY5lpnm6l8KBhnvpSxETmOE/3UpySjo6Fv5UiMykp5JyNsk5BSUPOqL2nnKP2sERklHWq3pgoaDf+nWPVfwsK6rcNIVilxW7xB6wNMVqtjXqLnVrQWbAj+IJFHcanRQAlxhH0xiJza7/owIrpMOBrsK4L9wckTA/GBoy0fQAAAABJRU5ErkJggg==) no-repeat 0 0;
            background-size: 100%;
            animation: rotation 2s linear infinite;
        }
        .nut-vert-loading-txt{
            height: 50px;
            padding-left: 5px;
        }
        .nut-vert-loading, .nut-vert-loading-txt{
            display: inline-block;
            vertical-align: middle;
        }
    }
}