利用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>

 

转载于:https://my.oschina.net/u/4004801/blog/3035611