scroll-view

<template>
    <view class="growth-value-cell">
        <!-- <scroll-view scroll-y="true" style="height:calc(100vh)" class="scroll-view-cell" @scrolltolower="lower"> -->
        <view class="scroll-view-cell">
            <view class="growth-value-list" v-for="( item , index ) in recordList" :key="index">
                <GrowthValueItem :recordData="item"></GrowthValueItem>
            </view>
            <view class="no-data" v-if="recordList.length < 1">
                <image class="bg-nodata" src="../../static/image/bg_no_growth.png"></image>
                <view class="tips">暂无成长值记录</view>
            </view>
        <!-- </scroll-view> -->
        </view>
    </view>
</template>

<script>
    import {
        getMemberActivityValueList,
        queryIntegralRecord
    } from "../../common/api/api.js";
    import GrowthValueItem from "../../components/GrowthValueItem/GrowthValueItem.vue";
    import {formatDateOfStamp} from ‘../../common/utils/dateUtil.js‘;
    import Vue from ‘vue‘;
    const app = new Vue();
    export default {
        
        components:{
            GrowthValueItem
        },
        
        data() {
            return {
                recordList: [],
                hasMoreData: false, //是否还有更多数据
                reqParms: { //请求参数
                    // awardType: 3,
                    currentPage: 1,
                    pageSize: 10
                },
            }
        },

        onShow() {
            this.getMemberActivityValueList();
        },
        
        // 下拉刷新  scrow-view 不支持下拉刷新  
        onPullDownRefresh() {
            this.recordList="";
            this.reqParms.currentPage=1
            this.getMemberActivityValueList();
        },

        // 上拉加载
        onReachBottom() {
            this.lower();
        },

        methods: {
            
            getMemberActivityValueList() {
                const params = this.reqParms; //参数设定        
                queryIntegralRecord(params).then(resp => {
                        const {
                            code,
                            data
                        } = resp;
                        if (code === "200") {
                            let datalen = 0;        
                            let list = data.dataList;    
                            let _recordList = this.recordList;
                                
                            if(list){
                                datalen = list.length;        
                            }
                            
                            for(let i = 0;i < datalen; i++){
                                list[i].createTime = formatDateOfStamp(list[i].createTime, ‘yyyy/MM/dd hh:mm:ss‘);
                                _recordList.push(list[i]);
                            }
                            
                            this.recordList = _recordList;
                            this.hasMoreData = datalen >= this.reqParms.pageSize; //true还有数据，false没数据了
                        }
                });
            },
            
            //滚动到底部
            lower(){
                if (this.hasMoreData) {
                    let count = this.reqParms.currentPage;
                    count++;
                    //还有数据需要加载
                    this.reqParms.currentPage = count;
                    this.getMemberActivityValueList();
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import ‘../../common/style/reset‘;

    .growth-value-cell {
        border-top: 1*2upx solid $borderColor;

        .scroll-view-cell {

            .growth-value-list {
                position: relative;
                padding: 0 15*2upx;
                background: $colorfff;

                &:after {
                    content: ‘‘;
                    display: block;
                    border-bottom: 1*2upx solid $borderColor;
                    position: absolute;
                    bottom: 0;
                    right: 15*2upx;
                    left: 15*2upx;
                }

                &:last-child {
                    &:after {
                        border: 0;
                    }
                }
            }

            .no-data {
                text-align: center;
                margin-top: 150*2upx;

                .bg-nodata {
                    width: 140*2upx;
                    height: 110*2upx;
                }

                .tips {
                    color: $color666;
                    font-size: $fontsize16;
                    margin-top: 20*2upx;
                }
            }
        }
    }
</style>