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

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

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

template:

       <scroller class="page-loadmore-list" :on-infinite="infinite" :on-refresh="refresh" ref="my_pull" :noDataText="noDataText">
           <div v-for="item in servers" :key="item.fu_no" class="page-loadmore-listitem" @click="push(item.fu_no)">
               <div>
                   <h3>{{item.fu_operate | xiaodifuOperate}}</h3>
                   <p>{{item.fu_addtime | dateYMDHM}}</p>
               </div>
               <div :class="{red:item.fu_type == 1,green:item.fu_type == 2}">
                   <span v-if="item.fu_type === 1">+</span>
                   <span v-if="item.fu_type === 2">-</span> {{item.fu_money}}
               </div>
           </div>
       </scroller>
       ```

methods:

// 上拉
        infinite: function() {
            console.log('infinite')
            if (!this.isLast) {
                this.transmit.pages++
                console.log("this.page   " + this.transmit.pages);
                this.getServers()
            } else {
                this.$refs.my_pull.finishInfinite(true);
            }
        },
        // 下拉
        refresh: function() {
            console.log('refresh')
            this.$refs.my_pull.finishPullToRefresh()
            this.transmit.pages = 1
            this.getServers()
        },  
        getServers() {
            $App.showWebActivity();   //和android交互
            this.$route.query.fuType ? this.transmit.fuType = this.$route.query.fuType : this.transmit.fuType = null
            this.$http.post(this.root + "************", {
                key: this.zkey,
                code: this.zcode,
                pages: this.transmit.pages,
                rows: this.transmit.rows,
                fuType: this.transmit.fuType,
                fuOperate: this.transmit.fuOperate,
                oNo: this.transmit.oNo,
                start: this.transmit.start,
                end: this.transmit.end,
                memberId: sessionStorage.getItem("memberId")
            }, {
                emulateJSON: true
            }).then((res) => {
                $App.dismissWebActivity()
                if (res.body.code === 0) {
                    console.log(res);
                    if (this.transmit.pages != 1) {
                        this.servers = this.servers.concat(res.body.page)
                    } else {
                        this.servers = res.body.page
                        if (res.body.page.length == 0) {
                            this.noimgOk = true
                            this.noDataText = ""
                        } else {
                            this.noDataText = "没有更多数据"
                        }
                    }
                    if (res.body.page.length >= this.transmit.rows) {
                        this.$refs.my_pull.finishInfinite(false);
                        this.isLast = false
                    } else {
                        this.$refs.my_pull.finishInfinite(true);
                        this.isLast = true
                    }
                } else {
                    console.log(res);
                }
            }, (err) => {
                $App.dismissWebActivity()
                console.log(err);
            })
        }
       ```

css:

.listUl {
            top: 60px;
            height: calc(100% - 60px) !important;
            .listLi {
                background: #fff;
                padding: 10px 15px;
                margin: 0 8px 15px;
                border-radius: 5px;
                .zh {
                    font-size: 15px;
                    padding-top: 3px;
                }
                h4,
                p,
                div {
                    overflow: hidden;
                    padding: 8px 0 5px;
                }
                h4 {
                    font-weight: normal;
                    /* prettier-ignore */
                    border-bottom: 1PX solid #eee;
                    padding-bottom: 15px;
                }
                >div {
                    padding-top: 15px;
                    padding-bottom: 15px;
                    /* prettier-ignore */
                    border-bottom: 1PX solid #eee;
                }
                >span {
                    display: block;
                    padding-top: 10px;
                    overflow: hidden;
                    i {
                        /* prettier-ignore */
                        border: 1PX solid #39c;
                        color: #39c;
                        padding: 5px 15px;
                        border-radius: 5px;
                        margin-right: 15px;
                        &:first-child {
                            margin-right: 0;
                        }
                        &.aq {
                            /* prettier-ignore */
                            border: 1PX solid #4caf50;
                            color: #4caf50;
                        }
                    }
                }
            }
        }