uView list 控件分頁加載出現抖動問題解決方案

使用 u-list 組件 動態加載數據時 滑動列表元素 會出現抖動的情況

解決 設置 preLoadScreen 爲根據 page 的動態變換就可以了

preLoadScreen 列表前後預渲染的屏數，1 代表一個屏幕的高度，1.5 代表 1 個半屏幕高度

<u-list @scrolltolower="scrolltolower" :preLoadScreen="page * 4">

 

<template>
    <view class="container">
        <yh-nav-menu :navTitle="navTitle" :backUrl="backUrl" :isTabBar="isTabBar"></yh-nav-menu>
        <!-- 搜索 -->
        <view class="search-box">
            <view class="search-select">
                <!-- <uni-data-select v-model="stateValue" :localdata="rangeOptions" @change="change"></uni-data-select> -->
                <view class="search-item">
                    <picker mode="date" :value="searchForm.beginTime" :start="startDate" :end="endDate"
                        @change="bindDateChange" data-timetype="B">
                        <view class="my-input">{{searchForm.beginTime}}</view>
                    </picker>
                </view>
                <view class="search-item">
                    <picker mode="date" :value="searchForm.endTime" :start="startDate" :end="endDate"
                        @change="bindDateChange" data-timetype="E">
                        <view class="my-input">{{searchForm.endTime}}</view>
                    </picker>
                </view>
                <view class="search-item">
                    <input type="text" v-model="searchForm.keyword" class="my-input" />
                </view>
            </view>
            <view class="search-icon" @click="searchClick">
                <u-icon name="search" size="32"></u-icon>
            </view>
        </view>
        <!-- 列表數據 -->
        <view class="list-box">
            <u-list @scrolltolower="scrolltolower"  :preLoadScreen="pageCount*4">
                <u-list-item v-for="(item, index) in tableList" :key="index" class="list-item-row">
                    <view class="list-item">
                        <!-- bb{{index+1}}aaaa -->
                        <view class="list-item-left">
                            <view class="list-item-left-row">
                                <view class="data-left">
                                    <view class="data-lable">收款單號</view>
                                    <view class="data-value">{{item.BillCode}}</view>
                                </view>
                                <view class="data-right">
                                    <view class="data-lable">日期</view>
                                    <view class="data-value">{{formatTimeYYMMDDHHMM(item.BillDate)}}</view>
                                </view>
                            </view>
                            <view class="list-item-left-row">
                                <view class="data-left">
                                    <view class="data-lable">客戶</view>
                                    <view class="data-value">{{item.ClientName}}</view>
                                </view>
                                <view class="data-right">
                                    <view class="data-lable">總金額</view>
                                    <view class="data-value">{{item.totalMoney}}</view>
                                </view>
                            </view>
                            <view class="list-item-left-row">
                                <view class="data-left">
                                    <view class="data-lable">訂單狀態</view>
                                    <view class="data-value">{{item.RecevieState}}</view>
                                </view>
                                <view class="data-right">
                                    <view class="data-lable">創建人</view>
                                    <view class="data-value">{{item.UserName}}</view>
                                </view>
                                <view class="data-right">
                                    <view class="data-lable">欠收金額</view>
                                    <view class="data-value">{{item.WaitReceMoney}}</view>
                                </view>
                                <view class="data-right">
                                    <view class="data-lable">預收金額</view>
                                    <view class="data-value">{{item.PrePayMoney}}</view>
                                </view>
                            </view>
                        </view>
                        <view class="list-item-right">
                            <!--     <view class="item-btn">
                                <u-button type="primary" text="查看" size="mini"
                                    @click="navTo('/pages/salescollectionlist/salescollectiondetail/salescollectiondetail?actionType=view&statementNo='+item.statementNo,item)">
                                </u-button>
                            </view> -->
                            <view class="item-btn">
                                <u-button type="success" text="收款" size="mini"
                                    @click="navTo('/pages/salescollectionlist/salescollectiondetail/salescollectiondetail?actionType=edit&CustName='+item.ClientName+'&BillCode='+item.BillCode,item)">
                                </u-button>
                            </view>
                            <!--     <view class="item-btn">
                                <u-button type="error" text="刪除" size="mini" @click="deleteItem(item)"></u-button>
                            </view> -->
                        </view>
                    </view>
                </u-list-item>
            </u-list>
        </view>

        <u-popup :show="show" :round="10" mode="center" @close="close" @open="open" customStyle="chy-dialog">
            <view class="chy-dialog">
                <view class="chy-title">確認刪除【{{tempRow.orderNo}}】訂單嗎？</view>
                <view class="chy-btn-save">
                    <u-button type="primary" text="確定" :customStyle="{width:'60%',borderRadius: '20px'}"
                        @click="saveData"></u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import {
        GetSalesRecList
    } from '@/common/api/receiptorder.js'
    import yhNavMenu from '@/components/yh-nav-menu/yh-nav-menu.vue'

    export default {
        name: 'salescollectionlist',
        components: {
            'yh-nav-menu': yhNavMenu //菜單控件
        },
        data() {
            const currentDate = this.getDate({
                format: true
            })
            return {
                navTitle: '銷售收款',
                backUrl: '/pages/workbench/workbench',
                isTabBar: true,
                stateValue: 0,
                total: 0,
                pageCount:1,//https://my.oschina.net/xiaohuai4869/blog/5536325
                //date: currentDate,
                searchForm: {
                    beginTime: this.getDate('beginTime'), //開始日期
                    endTime: currentDate, //截止日期
                    keyword: '', //客戶名稱，訂單號
                    pageNum: 1,
                    pageSize: 5
                },
                rangeOptions: [{
                        value: 0,
                        text: "全部"
                    },
                    {
                        value: 1,
                        text: "部分收款"
                    },
                    {
                        value: 2,
                        text: "收款完成"
                    },
                ],
                tableList: [],
                show: false,
                tempRow: {}
            }
        },
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            }
        },
        onLoad() {
            this.tableList=[];
            this.getDataList();
            
        },
        methods: {
            //查詢列表
            getDataList() {
                let that = this;
                if (that.total > that.tableList.length&&that.total!=0) {
                    uni.showLoading({
                        title: '加載中'
                    });
                    that.searchForm.pageNum = that.searchForm.pageNum + 1;
                    //that.pageCount=that.pageCount+1;
                    GetSalesRecList(that.searchForm.keyword, that.searchForm.beginTime, that.searchForm.endTime, that
                        .searchForm.pageNum, that.searchForm.pageSize).then((
                        response) => {
                        //console.log(response, "response")
                        if (response.Data.httpResult.Success == true) {
                            if (response.Data.httpResult.Data && response.Data.httpResult.Data.sSalOrder.length >
                                0) {
                                //that.tableList = response.Data.httpResult.Data.sSalOrder;
                                //that.tableList.push(...response.Data.httpResult.Data.sSalOrder);
                                 //that.tableList.concat(response.Data.httpResult.Data.sSalOrder);
                                that.tableList = that.tableList.concat(response.Data.httpResult.Data.sSalOrder);
                                that.total = response.Data.httpResult.dataCount;
                                that.pageCount=response.Data.httpResult.pageCount;
                                console.log(that.total,"that.total == 0",that.tableList.length,'=='+that.pageCount)
                            }

                        }
                        uni.hideLoading();
                    });
                } else if (that.total == 0) {
                    uni.showLoading({
                        title: '加載中'
                    });
                    that.searchForm.pageNum = 1;
                    //that.pageCount=that.pageCount+1;
                    GetSalesRecList(that.searchForm.keyword, that.searchForm.beginTime, that.searchForm.endTime, that
                        .searchForm.pageNum, that.searchForm.pageSize).then((
                        response) => {
                        //console.log(response, "response")
                        if (response.Data.httpResult.Success == true) {
                            if (response.Data.httpResult.Data && response.Data.httpResult.Data.sSalOrder.length >
                                0) {
                                //that.tableList = response.Data.httpResult.Data.sSalOrder;
                                //that.tableList.push(...response.Data.httpResult.Data.sSalOrder);
                                that.tableList = that.tableList.concat(response.Data.httpResult.Data.sSalOrder);
                                that.total = response.Data.httpResult.dataCount;
                                that.pageCount=response.Data.httpResult.pageCount;
                                console.log(that.total,"that.total == 0",that.tableList.length,'=='+that.pageCount)
                            }

                        }
                        uni.hideLoading();
                    });
                }
            },
            searchClick() {
                let that=this;
                this.tableList=[];
                that.searchForm.pageNum = 1;
                that.total = 0;
                this.getDataList();
            },
            bindDateChange: function(e) {
                let timetype = e.target.dataset.timetype;
                console.log(e.target.dataset.timetype, "eee");
                if (timetype == "B") {
                    this.searchForm.beginTime = e.detail.value;
                } else {
                    this.searchForm.endTime = e.detail.value;
                }

            },
            getDate(type) { //限制日期範圍
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                } else if (type === 'beginTime') {
                    month = month - 1;
                }
                month = month > 9 ? month : '0' + month;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            },
            change(e) {
                console.log("e:", e);
            },
            //繼續加載數據
            scrolltolower() {
                this.getDataList();
            },
            //刪除訂單
            deleteItem(row) {
                this.show = true;
                this.tempRow = {
                    ...row
                }
            },
            close() {
                this.show = false;
            },
            open() {

            },
            saveData() {
                //保存到數據庫
                this.show = false;
            },
            //刪除操作結束
            //查看和修改操作

            navTo(url, item) {
                uni.navigateTo({
                    url: url,
                    fail(err) {
                        console.log(err, "err");
                    },
                    success: function(res) {
                        // console.log(res,"resresresres")
                        // 通過eventChannel向被打開頁面傳送數據
                        // res.eventChannel.emit('sendSonData', {
                        //     data: item.customerId,
                        //     actionDisable: false,
                        // }); //發送數據給下一個頁面
                    }
                });
            },


        }
    }
</script>

<style scoped lang="scss">
    .container {
        height: 100vh;
        width: 100%;
        overflow: scroll;
        margin-bottom: 10rpx;
        padding: 10rpx;

        // 搜索欄目樣式
        .search-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #E9ECED;

            .search-select {
                flex: 1;
                padding-right: 10rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .search-item {
                    border: 1rpx solid #007AD7;
                    height: 60rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 15rpx;
                    padding: 5rpx;

                    .my-input {
                        font-size: 24rpx;
                        min-width: 200rpx;
                    }
                }
            }

            .search-icon {
                width: 100rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 25rpx;
            }

        }

        // 列表相關樣式
        .list-box {
            margin-top: 10rpx;

            .list-item-row:hover {
                background: #FFEA4B;
            }

            .list-item {
                border-bottom: 1rpx solid #000000;
                padding: 10rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 10rpx 0;

                .list-item-left {
                    flex: 1;

                    .list-item-left-row {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 5rpx 0;

                        .data-left {
                            flex: 1;
                        }

                        .data-right {
                            flex: 1;
                        }
                    }

                    .data-lable {
                        color: #828282;
                        padding: 10rpx 0;
                        font-size: 24rpx;
                    }

                    .data-value {
                        color: #000000;
                        font-size: 28rpx;
                        font-weight: bold;
                    }
                }

                .list-item-right {
                    width: 100rpx;

                    .item-btn {
                        margin: 30rpx 0;
                    }
                }
            }
        }

        .chy-dialog {
            height: 300px;
            flex: 1;
            border-radius: 20px;
            padding: 20px 15px;

            .chy-title {
                margin: 20px auto 50px auto;
                text-align: center;
                width: 450rpx;
            }

            .chy-btn-save {
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
</style>

 https://blog.csdn.net/qq_32784303/article/details/126365957

https://my.oschina.net/xiaohuai4869/blog/5536325

參考：https://www.cnblogs.com/wan123/p/16195423.html