qzw_xcx/pages/myCenter/definite.vue

<template>
	<view>
		<scroll-view  class="floor-list" style="height: 95vh;"
		 :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
		 :refresher-enabled="false">
		<view class="money">
			<view class="moneysize">{{userinfo.member_points}}</view>
			<view>我的圈币</view>
		</view>
		<van-cell v-for="(item,index) in point_list" :key="index" use-label-slot :title="'圈币来源:'+item.pl_desc" >
			<template>
				{{item.pl_stage == "payment" ? "-" : "+"}}{{item.pl_points}}
			</template>
			<template slot="label">
				{{item.pl_addtime}}
			</template>
		</van-cell>
		</scroll-view>
		 <Gobacktop @getop="getop" v-if="isTop" />
	</view>
</template>

<script>
	    import Gobacktop from '@/component/Gobacktop.vue'
	    export default {
			components: {
				Gobacktop
			},
	        onReady: function() {
				   uni.setNavigationBarColor({
					   frontColor: '#ffffff',
					   backgroundColor: '#D9332E',
					   animation: {
						   duration: 400,
						   timingFunc: 'easeIn'
					   }
				   })
	        },
			data() {
				return{
					page: 1,
					ispull: true,
					point_list:[],
					userinfo:{},
					scrollTop: 0,
					isTop: false,
					old: {
						scrollTop: 0
					},
				}
			},
			onLoad() {
				this.getuserinfo();
				this.getlist();
			},
			methods:{
				// 滚动到顶部
				upper(e) {
				
				},
				
				getop() {
					   this.scrollTop = this.old.scrollTop
		                this.$nextTick(function(){
		                    this.scrollTop=0;
		                });
						this.isTop = false;
				},
				
				// 滚到底部
				lower(e) {
					this.page = this.page + 1;
					if(this.ispull) {
						this.getlist();
					}
				},
				
				// 滚动时触发
				scroll(e) {
					if(e.detail.scrollTop > 400) {
						this.isTop = true;
					}else{ //当距离小于500时显示回到顶部按钮
						this.isTop = false;
					}
					this.old.scrollTop = e.detail.scrollTop
				},
				getuserinfo() {
					this.request({
						url:'/v2/member/info',
						method:'GET',
						success:(res)=>{
							let { data } = res.data;
							this.userinfo = data;
						}
					})
				},
				// 获取圈币明细
				getlist() {
					this.request({
						url: '/v2/member/points',
						method: 'post',
						data: {
							page:　this.page,
							page_size:　10
						},
						success: (res) => {
							// ispull
							let { data } = res.data;
							if(data.point_list.length < 10) {
								this.ispull = false;
							}
							this.point_list = this.point_list.concat(data.point_list);
						}
					})
				}
			}
	      
	    }
</script>

<style lang="scss">
	.money {
		height: 140upx;
		color: #fff;
		text-align: center;
		background-color: #D9332E;
		font-size: 28upx;
		padding: 20upx 0 40upx 0;
		.moneysize {
			font-size: 42upx;
			padding-top: 25upx;
		}
	
	}
</style>