使用 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');
}
},
onl oad() {
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
标签：控件,searchForm,uView,list,tableList,item,httpResult,Data,response From： https://www.cnblogs.com/xiaohuasan/p/16884939.html