uniapp分页

<template>
    <view>
        <!-- 事件列表 -->
        <view class="top" style="overflow: hidden;">
            <view class="" style="width: 84%; float: left;">
                <u-search shape="square" :show-action='false' bg-color='#f7f7f9' v-model="listQuery.name"
                    @change='search'>
                </u-search>
            </view>
            <view class=" shaixuan" @click="screenShow=true">
                <image class="sxImg" src="../../static/sx.png" mode="aspectFill"></image>
            </view>
        </view>

        <view class="nr">

            <view class="card" v-for="(item,index) in list" :key='index' @click="eventDetails(item)">
                <view class="cardTop">
                    <view class="title">
                        {{item.content_number}}
                    </view>

                </view>
                <view class="cardBottom">
                    <view class="cardBottomImg">
                        <image class="imgI" :src="apiUrl+item.picture[0]" mode="aspectFit"></image>
                    </view>
                    <view class="cardText">

                        <view class="cunM">
                        {{item.village_id_name}}
                        </view>
                        <view class="">
                            <text>故障类型：</text>{{item.classification_id_name}}
                        </view>
                        <view class="">
                            <text>电表编号：</text>{{item.electric_meter_id_name}}
                        </view>
                        <view class="">
                            <text>上传时间：</text>{{item.report_time}}
                        </view>
                    </view>

                </view>
            </view>
            <u-loadmore :status="finished" />

        </view>

        <u-popup class='popup' :custom-style='cstyle' v-model="screenShow" border-radius="14" mode="right"
            width="600rpx" height="980">
            <view class="bag" style="padding: 20rpx;">
                <view class="popupBottom">
                    <view class="popupSleect">
                        <view class="titlePopu">
                            村名
                        </view>
                        <view :class="{villageCard:listQuery.village_id  != -1, liBackground:listQuery.village_id == -1}" :key='index' @click="villageName(-1)">
                            全部
                        </view>
                        <view :class="{villageCard:listQuery.village_id != item.id, liBackground:listQuery.village_id  == item.id}"
                            v-for="(item,index) in modelist" :key='index' @click="villageName(item.id)">
                            {{item.name}}
                        </view>
                    </view>
                    <view class="popupSleect">
                        <view class="titlePopu">
                            故障类型
                        </view>
                        <view :class="{villageCard:listQuery.classification_id  != -1, liBackground:listQuery.classification_id == -1}" :key='index' @click="typeClick(-1)">
                            全部
                        </view>
                        <view :class="{villageCard:listQuery.classification_id  != item.id, liBackground:listQuery.classification_id == item.id}"
                            v-for="(item,index) in department" :key='index' @click="typeClick(item.id)">
                                {{item.name}}
                        </view>
                    </view>

                </view>

                <view class="selectUp"  @click="determine">
                    确定
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import apiUrl from '@/utils/apiUrl';
    export default {
        data() {
            return {
                apiUrl: apiUrl.base,
                AppLoginUser: uni.getStorageSync('AppLoginUser'),
                listQuery: {
                    page: 1,
                    limit: 10,
                    name:'',
                    village_id:-1,//村id
                    classification_id:-1,//类别id
                    AppLoginUser: uni.getStorageSync('AppLoginUser'),
                },
                total:'',
                //列表加载状态
                bottomLoading: false,
                finished: 'nomore',
                // 列表
                list: null,

                cstyle: {
                    backgroundColor: '#f5f5f5',
                    padding: '10rpx 20rpx',
                    borderRadius: '50rpx'
                },

                // 筛选
                screenShow: false,
                
                // 村
                modelist:[],
                department:[]
                // // 添加信息弹框
                // userArray: {},

            }
        },

        onShow() {
            if (this.list == null) {
                this.list = []
                this.getList();
                this.getMode()
                this.getSelect()
            }

        },
        onLoad() {
            this.list = []
            this.getList();
            this.getMode() 
            this.getSelect()
        },
        onReachBottom() {
            console.log(this.finished)
            console.log(this.listQuery.page)
            if (this.listQuery.page >= this.total) {
                console.log('1111')
                this.finished = 'nomore'; //已经滑到底的提醒
                return false;
            } else {
                this.listQuery.page++;
                this.getList();
            }
        },
        methods: {
            // 获取事件列表
            getList() {
                this.$ajax({
                    url: '/api/applets/MultiUser.ashx?par=GetFailureRecords',
                    method: 'post',
                    data: this.listQuery
                }).then(data => {
                    console.log('数据',data);
                    let dataBackups = data.data.rows;
                    // 图片转数组
                    for (var i = 0; i < dataBackups.length; i++) {
                        dataBackups[i].picture = dataBackups[i].picture.split(",")
                    }
                    if (dataBackups.length > 0) {
                        //         3                9/3
                        this.total = Math.ceil(data.data.total / this.listQuery.limit);
                        // console.log(this.total)
                        // 拼接数组
                        this.list = this.list.concat(dataBackups);
                        // 加载状态
                        this.finished = 'loading'
                        if (this.listQuery.page >= this.total) {
                            console.log(this.listQuery.page)
                            this.finished = 'nomore';
                        }
                    } else {
                        this.finished = 'nomore';
                    }
                });
            },
            // 选择
            villageName(id) {
                //当前的背景颜色赋给当前点击的索引
                this.listQuery.village_id = id;
            },
            typeClick(id) {
                //当前的背景颜色赋给当前点击的索引
                this.listQuery.classification_id = id;
            },
            // 搜索
            search() {
                this.listQuery.page = 1;
                this.list = []
                this.getList();
                this.screenShow = false

            },
            // 筛选
            determine() {
                this.listQuery.page = 1;
                this.list = []
                this.getList();
                this.screenShow = false

            },
            // quxiao() {
            //     this.listQuery = {
            //     page: 1,
            //     limit: 10,
            //     type:'',
            //     name:'',
            //     AppLoginUser: uni.getStorageSync('AppLoginUser'),
            //         },
            //         this.userArray = {}
            //     this.list = []
            //     this.getList();
            //     this.screenShow = false

            // },
            // 获取村
            getMode() {
                this.$ajax({
                    url: '/api/applets/MultiUser.ashx?par=GetUserVillage&AppLoginUser=' +
                        this.AppLoginUser+'&page=1&limit=9999',
                    method: 'post',
                }).then(data => {
                    console.log('村', data);
                    this.modelist = data.data.rows
            
                });
            },
        
    
                    // 类别
        
    getSelect() {
                this.$ajax({
                    url: '/api/applets/MultiUser.ashx?par=GetClassifications&AppLoginUser=' +
                        this.AppLoginUser,
                    method: 'post',
                }).then(data => {
                    console.log('分类', data);
                    this.department = data.data

                });
            },

            // 事件详情
            eventDetails(item) {

                uni.navigateTo({
                    url: '../fault/faultDetails?id=' + item.id
                });

            }
        }
    }
</script>

<style scoped>
    .selectUp{
        background-color: #407dc5;
        color: #FFFFFF;
        border-radius: 10rpx;
        font-size: 35rpx;
        padding: 20rpx;
        text-align: center;
    }
    .titlePopu {
        margin-bottom: 20rpx;
        font-size: 35rpx;
        font-weight: 600;
    }

    .villageCard {
        background-color: #f1f1f1;
        text-align: center;
        padding: 15rpx 0;
        color: #808080;
        border-radius: 50rpx;
        margin: 10rpx;
        width: 30%;
        display: inline-block;
    }

    .liBackground {
        background-color: #407dc5;
        color: #FFFFFF;
        text-align: center;
        padding: 15rpx 0;
        border-radius: 50rpx;
        margin: 10rpx;
        width: 30%;
        display: inline-block;
        
    }

    .popupSleect {
        margin-bottom: 20rpx;
    }

    .cunM {
        font-size: 40rpx;
    }

    .selecticon>>>.u-icon__icon {
        right: 60rpx;
    }

    .popup>>>.u-calendar__content__item {
        width: 10%;
        padding: 0;
        border-radius: 0;
    }

    .card {
        background-color: #FFFFFF;
        padding: 20rpx 30rpx;
        margin: 30rpx 0;
    }

    .cardTop {}

    .title {
        font-size: 30rpx;
        color: #407dc5;

    }

    .icon {
        float: right;
    }

    .cardBottom {
        margin-top: 30rpx;
        overflow: hidden;
    }

    .cardBottomImg {
        width: 200rpx;
        height: 200rpx;
        float: left;
        margin-right: 20rpx;
        border-radius: 10rpx;
    }

    .imgI {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
    }

    .cardText {
        /* margin-top: 20rpx; */
        width: 60%;
        float: left;
        line-height: 50rpx;
    }

    .name {
        font-size: 30rpx;
    }

    .cardTime {
        color: #cfcfcf;
    }

    .top {
        padding: 30rpx;
        background-color: #FFFFFF;
    }

    .shaixuan {
        float: right;
        position: relative;

        width: 13%;
    }

    .sxImg {
        width: 55rpx;
        height: 55rpx;
        position: absolute;
        right: 5px;
        bottom: -26px;
    }

    .buttonbottom {
        overflow: hidden;
        width: 100%;
    }
</style>