利用vux作手機上拉刷新下拉加載

<template>

<div class="integralRecord">

<scroller

v-model="scrollerStatus"

lock-x

scrollbar-y

:pullup-config="upobj"

@on-scroll-bottom="onScrollBottom"

ref="scrollerBottom"

:scroll-bottom-offst="200"

:use-pullup="showUp"

@on-pullup-loading="selPullUp"

:bounce="isbounce"

v-if="listData.length>0"

>

<div>

<div class="list" v-for="(item,key) in listData" :key="key">

<div>

<p style="font-weight:bold; ">{{item.pointRemark}}</p>

<p style="color:#7F7F7FFF;">積分餘額:&nbsp;</p>

</div>

<div>

<p style="font-weight:bold;color:#FF483AFF;font-size:15px;">+{{item.points}}積分</p>

<p style="color:#7F7F7FFF;">{{item.createTime}}</p>

</div>

</div>

</div>

</scroller>

</div>

</template>

<script>

import { Scroller } from "vux";

 

export default {

components: {

Scroller

},

data() {

return {

// height: "-56",

//是否使用上拉組件

showUp: true,

//是否使用邊緣回彈效果

isbounce: true,

//上拉組件配置

upobj: {

content: "上拉加載更多",

pullUpHeight: 60,

autoRefresh: true,

downContent: `<spn class="iconfont icon-more" style="font-size:12px"></span>釋放後加載`, //

upContent: "",

loadingContent: `<spn class="iconfont icon-more" style="font-size:12px"></span>加載中...`, //

clsPrefix: "xs-plugin-pullup-",

color: "#fff"

},

scrollerStatus: {

pullupStatus: "default"

},

isMounted: false,

token: "1",

id: "",

listData: [],

pageNum: 1,

pageSize: 10

};

},

methods: {

//監聽下拉,暫時無使用

onScrollBottom() {},

//上拉加載數據

selPullUp() {

this.pageIndex++;

this.getData();

},

//獲取積分列表數據

getData() {

const postData = {

"user-token": this.token,

pageNum: this.pageNum,

pageSize: this.pageSize

};

this.$http.post("/loginapi/user/pointsdetail/all", postData).then(res => {

console.log(res.result.data);

res.result.data.forEach(item => {

this.listData.push(item);

});

if (res.result.data.length < this.pageSize) {

this.isbounce = false;

this.showUp = false;

if (!this.isMounted) {

this.isMounted = true;

} else {

this.$refs.scrollerBottom.disablePullup();

}

} else {

if (!this.isMounted) {

this.isMounted = true;

} else {

this.$refs.scrollerBottom.donePullup();

}

}

});

}

},

mounted() {

this.getData();

}

};

</script>

<style lang="less">

.integralRecord {

.list {

margin-top: 1px;

height: 65px;

box-sizing: border-box;

padding: 12px 18px;

display: flex;

justify-content: space-between;

background-color: #ffffffff;

> div {

flex: 1;

}

& > div:nth-child(2) {

text-align: right;

}

}

}

</style>