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.
184 lines
4.5 KiB
184 lines
4.5 KiB
<!-- 首页虚拟滚动 -->
|
|
<template>
|
|
<view :style="{ height : tableListSize < visibleSize ? tableListSize * lineHeight + getRpxToPx(65) + 'px' : '560rpx' }" class="virtualScroll content">
|
|
<view class="success_info_body">
|
|
<!-- 标准title可以调用组件 -->
|
|
<view class="title_view">
|
|
{{ $t('page.virtualScroll.title') }}
|
|
</view>
|
|
|
|
<!-- 参数名称、列数根据实际情况调整 -->
|
|
<view class="table_body">
|
|
<view :style="{ height : tableListSize < visibleSize ? tableListSize * lineHeight + 'px' : '480rpx'}" class="table_main_body">
|
|
<view class="table_inner_body" :class="{ animate }" :style="{ transform: 'translateY(' + tableTop + 'px)' , height : tableListSize < visibleSize ? tableListSize * lineHeight + 'px' : '480rpx'}">
|
|
<view class="table_tr" v-for="(item,index) in tableList" :key="index">
|
|
<view class="tr1 tr">{{item.auccont}}</view>
|
|
<view class="tr2 tr">{{item.money}}</view>
|
|
<view class="tr3 tr" v-if="item.createTime">{{item.createTime}}</view>
|
|
<view class="tr3 tr" v-else>-</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tableTimer: null,
|
|
tableTop: 0,
|
|
tableList: [],
|
|
|
|
tableListSize: 0,
|
|
componentTimer: null,
|
|
|
|
//需要根据情况设置的参数
|
|
visibleSize: 3, //容器内可视最大完整行数
|
|
//这里分三个比分写对应样式的高、下外边距、边框计算。直接整体计算有些误差
|
|
lineHeight: this.getRpxToPx(140) + this.getRpxToPx(20) + this.getRpxToPx(2), //每行的实际高度（包含margin-top/bottom,border等）
|
|
componentTimerInterval: 3600000, //刷新数据的时间间隔
|
|
tableTimerInterval: 1000, //向上滚动 1px 所需要的时间，越小越快，推荐值 100
|
|
animate : true
|
|
}
|
|
},
|
|
mounted() {
|
|
clearInterval(this.componentTimer);
|
|
this.bsGetProductProcess();
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.componentTimer);
|
|
clearInterval(this.tableTimer);
|
|
},
|
|
methods: {
|
|
//调用数据接口，获取列表数据
|
|
bsGetProductProcess() {
|
|
clearInterval(this.tableTimer);
|
|
this.tableTop = 0;
|
|
|
|
this.request('getIndexScroll').then(res => {
|
|
if(res.code == 200){
|
|
this.tableList = res.result
|
|
this.tableActionFun();
|
|
}
|
|
})
|
|
},
|
|
tableActionFun() {
|
|
this.tableListSize = this.tableList.length; //数据总数
|
|
this.tableList = this.tableList.concat(this.tableList); //拼接一个数组数据
|
|
this.tableTimerFun();
|
|
},
|
|
|
|
//控制元素滚动
|
|
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);
|
|
},
|
|
|
|
//转换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);
|
|
return parseInt(rpxToPx);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.virtualScroll {
|
|
width: 100%;
|
|
}
|
|
|
|
.content {
|
|
width: 96%;
|
|
margin: 0 auto;
|
|
color: $uni-bg-color-app;
|
|
}
|
|
|
|
.title_view {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
font-size: 32rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.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: 22%;
|
|
}
|
|
|
|
.tr3 {
|
|
width: 50%;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.table_main_body {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table_inner_body {
|
|
width: 98%;
|
|
margin-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>
|