You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
274 lines
6.4 KiB
274 lines
6.4 KiB
<!-- 首页虚拟滚动 -->
|
|
<template>
|
|
<view class="virtualScroll content">
|
|
<view class="success_info_body">
|
|
<!-- 标准title可以调用组件 -->
|
|
<view class="title_view">
|
|
{{ $t('page.virtualScroll.title') }}
|
|
</view>
|
|
|
|
<!-- 参数名称、列数根据实际情况调整 -->
|
|
<view class="table_body">
|
|
<view class="table_main_body">
|
|
<view class="table_inner_body" :class="{ animate }" :style="{top: tableTop + 'px'}">
|
|
<view class="table_tr" v-for="(item,index) in tableList" :key="index">
|
|
<view class="tr1 tr">{{item.planNo}}</view>
|
|
<view class="tr2 tr">{{item.type}}</view>
|
|
<view class="tr3 tr" v-if="item.startDate!='-'">{{item.startDate}} ~ {{item.endDate}}</view>
|
|
<view class="tr3 tr" v-else>-</view>
|
|
<view class="tr4 tr" v-if="item.process!='-'">{{Number(item.process).toFixed(2)}} %</view>
|
|
<view class="tr4 tr" v-else>-</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tableTimer: null,
|
|
tableTop: 0,
|
|
tableList: [{
|
|
"process": 0.0000,
|
|
"planNo": "BP2022060701",
|
|
"endDate": "2022-06-07",
|
|
"type": "block",
|
|
"startDate": "2022-06-07"
|
|
},
|
|
{
|
|
"process": 0.0000,
|
|
"planNo": "WP2022061301",
|
|
"endDate": "2022-06-13",
|
|
"type": "wallboard",
|
|
"startDate": "2022-06-13"
|
|
},
|
|
{
|
|
"process": 0.0000,
|
|
"planNo": "WP2022061301",
|
|
"endDate": "2022-06-13",
|
|
"type": "wallboard",
|
|
"startDate": "2022-06-13"
|
|
},
|
|
{
|
|
"process": 0.0000,
|
|
"planNo": "WP2022061301",
|
|
"endDate": "2022-06-13",
|
|
"type": "wallboard",
|
|
"startDate": "2022-06-13"
|
|
},
|
|
{
|
|
"process": 0.0000,
|
|
"planNo": "WP2022061301",
|
|
"endDate": "2022-06-13",
|
|
"type": "wallboard",
|
|
"startDate": "2022-06-13"
|
|
},
|
|
{
|
|
"process": 0.0000,
|
|
"planNo": "WP2022061301",
|
|
"endDate": "2022-06-13",
|
|
"type": "wallboard",
|
|
"startDate": "2022-06-13"
|
|
},
|
|
{
|
|
"process": 0.0000,
|
|
"planNo": "WP2022061301",
|
|
"endDate": "2022-06-13",
|
|
"type": "wallboard",
|
|
"startDate": "2022-06-13"
|
|
}
|
|
],
|
|
|
|
tableListSize: 0,
|
|
componentTimer: null,
|
|
|
|
//需要根据情况设置的参数
|
|
visibleSize: 3, //容器内可视最大完整行数
|
|
lineHeight: this.getRpxToPx(162), //每行的实际高度（包含margin-top/bottom,border等）
|
|
componentTimerInterval: 3600000, //刷新数据的时间间隔
|
|
tableTimerInterval: 1000, //向上滚动 1px 所需要的时间，越小越快，推荐值 100
|
|
animate : true
|
|
}
|
|
},
|
|
//如果没有父元素传值，将watch内的内容搬至mounted中即可
|
|
props: ["activeFactoryId"],
|
|
watch: {
|
|
activeFactoryId(val, oldVal) {
|
|
clearInterval(this.componentTimer);
|
|
this.bsGetProductProcess();
|
|
this.componentTimerFun();
|
|
}
|
|
},
|
|
mounted() {
|
|
clearInterval(this.componentTimer);
|
|
this.bsGetProductProcess();
|
|
this.componentTimerFun();
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.componentTimer);
|
|
clearInterval(this.tableTimer);
|
|
},
|
|
methods: {
|
|
//调用数据接口，获取列表数据
|
|
bsGetProductProcess() {
|
|
clearInterval(this.tableTimer);
|
|
this.tableTop = 0;
|
|
if (this.activeFactoryId != "") {
|
|
// this.request('forgetPass').then(res => {
|
|
// if(res.code == 200){
|
|
// this.serverList = res.result
|
|
// }
|
|
// })
|
|
this.tableActionFun();
|
|
}
|
|
},
|
|
tableActionFun() {
|
|
this.tableListSize = this.tableList.length; //数据总数
|
|
if (this.tableListSize > this.visibleSize) { //总数大于容器内可视最大完整行数
|
|
this.tableList = this.tableList.concat(this.tableList); //拼接一个数组数据
|
|
this.tableTimerFun();
|
|
} else {
|
|
this.fillTableList();
|
|
}
|
|
},
|
|
//当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
|
|
fillTableList() {
|
|
var addLength = this.visibleSize - this.tableListSize;
|
|
for (var i = 0; i < addLength; i++) {
|
|
this.tableList.push({
|
|
planNo: "-",
|
|
type: "-",
|
|
startDate: "-",
|
|
endDate: "-",
|
|
process: "-"
|
|
});
|
|
}
|
|
},
|
|
//控制元素滚动
|
|
tableTimerFun() {
|
|
var count = 0;
|
|
this.tableTimer = setInterval(() => {
|
|
if (count < (this.tableList.length / 2) * this.lineHeight) {
|
|
this.animate = true
|
|
this.tableTop -= this.lineHeight;
|
|
count += this.lineHeight;
|
|
} else {
|
|
this.animate = false
|
|
this.tableTop = 0;
|
|
count = 0;
|
|
}
|
|
}, this.tableTimerInterval);
|
|
},
|
|
|
|
//更新数据
|
|
componentTimerFun() {
|
|
this.componentTimer = setInterval(() => {
|
|
this.bsGetProductProcess();
|
|
}, this.componentTimerInterval);
|
|
},
|
|
|
|
//转换rpx单位
|
|
getRpxToPx(rpx) {
|
|
// 获取系统信息，这里使用同步方法uni.getSystemInfoSync
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
// 假设设计稿宽度为750rpx
|
|
const designWidth = 750;
|
|
// 屏幕宽度，单位为px
|
|
let screenWidth = systemInfo.screenWidth;
|
|
//防止屏幕过大时转换的值太大。超过960就设置screenWidth为版心宽度
|
|
if(screenWidth > 960){
|
|
screenWidth = 375
|
|
}
|
|
// 计算1rpx等于多少px
|
|
const rpxToPx = screenWidth / (designWidth / rpx);
|
|
console.log(rpxToPx);
|
|
return rpxToPx;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.virtualScroll {
|
|
width: 100%;
|
|
height: 560rpx;
|
|
}
|
|
|
|
.content {
|
|
width: 96%;
|
|
margin: 0 auto;
|
|
color: $uni-bg-color-app;
|
|
}
|
|
|
|
.title_view {
|
|
width: 100%;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.table_body {
|
|
width: 100%;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.tr {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
box-sizing: border-box;
|
|
padding: 0 5px;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.tr1 {
|
|
width: 28%;
|
|
}
|
|
|
|
.tr2 {
|
|
width: 15%;
|
|
}
|
|
|
|
.tr3 {
|
|
width: 35%;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.tr4 {
|
|
flex: 1;
|
|
}
|
|
|
|
.table_main_body {
|
|
width: 100%;
|
|
height: 480rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.table_inner_body {
|
|
width: 98%;
|
|
position: absolute;
|
|
left: 1%;
|
|
}
|
|
|
|
.animate{
|
|
transition: all .3s;
|
|
}
|
|
|
|
.table_tr {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 140rpx;
|
|
color: $uni-bg-color-app;
|
|
font-size: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
// box-shadow: 2rpx 2rpx 6rpx 1rpx rgba(0, 0, 0, .1),
|
|
// -2rpx -2rpx 6rpx 1rpx rgba(0, 0, 0, .1);
|
|
border-radius: 10rpx;
|
|
background: $uni-bg-color;
|
|
border: 2rpx solid #ccc;
|
|
}
|
|
</style>
|