使用vue-scroller实现上拉加载下拉刷新

列表+优化+上拉加载下拉刷新

因为刚进页面就会下拉加载,所以我在created里面就没有加上http请求

isLast : 是否为最后一次
noDataText: 页末提示

getsetver方法里面的逻辑:

1. 判断是否是第一页
2. 下一页是否还有数据

template:

script

css:

    .content {
        height: 100%;
        .isOk,
        .isNo {
            width: 350px;
            border-radius: 3px;
            margin: 0 auto;
            h3 {
                padding: 15px 0;
                text-align: center;
                font-weight: normal;
                font-size: 17px;
                border-bottom: 1PX solid #eeeeee;
                margin-bottom: 15px;
            }
            textarea {
                width: 95%;
                display: block;
                margin: 0 auto;
                box-sizing: border-box;
                border-color: #ccc;
            }
            .import {
                display: flex;
                padding: 0 15px;
                align-items: center;
                height: 40px;
                span {
                    width: 55%;
                    font-size: 17px;
                    color: #777;
                }
                input {
                    width: 45%;
                    height: 70%;
                    border: 1PX solid #ddd;
                    border-radius: 3px;
                }
            }
            .operation {
                padding-top: 25px;
                display: flex;
                justify-content: center;
                span {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 40px;
                    width: 50%;
                    font-size: 16px;
                    &:first-child {
                        border-top: 1PX solid #ccc;
                        color: #888;
                        border-bottom-left-radius: 3px;
                    }
                    &:last-child {
                        background: #39c;
                        border-top: 1PX solid #39c;
                        color: #fff;
                        border-bottom-right-radius: 3px;
                    }
                }
            }
        }
        .tab {
            .active {
                border-bottom: 2PX solid red !important;
            }
            margin-bottom: 15px;
            background: #fff;
            width: 100%;
            height: 50px;
            overflow: hidden;
            /* border-bottom: 1px solid #ccc; */
            top: 52px !important;
            margin-bottom: 15px;
            .ulTab {
                height: 100%;
                display: flex;
                overflow: hidden;
                height: 100%;
                li {
                    border-bottom: 2PX solid #fff;
                    height: 100%;
                    height: 100%;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex: none;
                    width: 90px;
                    /* height: 36px; */
                    list-style: none;
                    font-size: 15px;
                }
            }
        }
        .infoContent {
            position: relative;
            width: 100%;
            .listInfo {
                margin-bottom: 10px;
                >div {
                    font-size: 16px;
                    display: flex;
                    justify-content: space-between;
                    padding: 0 15px;
                    background: #fff;
                    &:nth-child(1) {
                        padding-top: 15px;
                        padding-bottom: 15px;
                    }
                    &:nth-child(2) {
                        padding-bottom: 15px;
                        border-bottom: 1PX solid #eee;
                    }
                    &:nth-child(3) {
                        height: 40px;
                        line-height: 40px;
                        div {
                            display: flex;
                            align-items: center;
                            span {
                                width: 60px;
                                height: 25px;
                                line-height: 25px;
                                box-sizing: border-box;
                                text-align: center;
                                font-size: 14px;
                                border: 1PX solid #66cccc;
                                color: #6cc;
                                border-radius: 2px;
                                margin-left: 12px;
                                &.ok {
                                    background: #6cc;
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }
        }
    }