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.
132 lines
3.1 KiB
132 lines
3.1 KiB
<!-- 虚拟滚动组件 -->
|
|
<template>
|
|
<view class="virtualScroll">
|
|
<view class="virtualScroll-title">{{ $t('page.virtualScroll.title') }}</view>
|
|
<!-- 滚动列表 -->
|
|
<view
|
|
:style="{ height : scrollListLength >= maxShowNumber ? `${ maxShowNumber * 160 }rpx` : `${scrollListLength * 164}rpx` }"
|
|
class="scroll-list">
|
|
<view :class="{ animate }" :style="{ transform : `translate(0rpx,${ -scrollPostion }rpx)`}">
|
|
<!-- 主要数据 -->
|
|
<view class="scroll-list-main-data">
|
|
<view ref="scrollItem" v-for="item in scrollList" :key="item.id" class="scroll-item">
|
|
<view class="user-name">{{ item.auccont }}</view>
|
|
<view class="money">{{ item.money }}</view>
|
|
<view class="time">{{ item.createTime }}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 副本数据 -->
|
|
<view class="scroll-list-copy-data">
|
|
<view v-for="item in scrollList" :key="item.id" class="scroll-item">
|
|
<view class="user-name">{{ item.auccont }}</view>
|
|
<view class="money">{{ item.money }}</view>
|
|
<view class="time">{{ item.createTime }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
scrollList: [], //滚动的数据列表
|
|
scrollListLength: 0, //滚动数据列表数据总数
|
|
maxShowNumber: 3, //显示个数
|
|
scrollInterval: null, //控制元素滚动的定时器
|
|
topInterval: null, //返回顶部定时器
|
|
scrollPostion: 0, //滚动位置
|
|
animate: true, //是否显示延迟动画效果
|
|
lineHeight: 0, //每个滚动元素的高度
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getScrollList()
|
|
},
|
|
methods: {
|
|
//获取滚动列表
|
|
async getScrollList() {
|
|
this.request('getIndexScroll').then(res => {
|
|
if (res.code == 200) {
|
|
this.scrollList = res.result
|
|
this.scrollListLength = res.result.length
|
|
this.scroll()
|
|
}
|
|
})
|
|
},
|
|
|
|
//控制元素滚动
|
|
scroll() {
|
|
this.scrollInterval = setInterval(() => {
|
|
this.animate = true
|
|
this.scrollPostion += 160
|
|
}, 1000)
|
|
|
|
this.topInterval = setInterval(() => {
|
|
if (this.scrollPostion > this.scrollListLength * 160) {
|
|
this.animate = false
|
|
clearInterval(this.scrollInterval)
|
|
clearInterval(this.topInterval)
|
|
this.scrollPostion = 0
|
|
this.scroll()
|
|
}
|
|
}, 100)
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.virtualScroll {
|
|
margin: 0rpx auto;
|
|
width: 96%;
|
|
|
|
.virtualScroll-title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 36rpx;
|
|
height: 80rpx;
|
|
color: $uni-bg-color-app;
|
|
}
|
|
|
|
.scroll-list {
|
|
overflow: hidden;
|
|
|
|
// 主要数据 、副本数据
|
|
.scroll-list-main-data,
|
|
.scroll-list-copy-data {
|
|
padding-top: 20rpx;
|
|
|
|
.scroll-item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 140rpx;
|
|
width: 98%;
|
|
margin-left: 1%;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 10rpx;
|
|
box-shadow: 4rpx 4rpx 10rpx rgba(0, 0, 0, .1),
|
|
-4rpx -4rpx 10rpx rgba(0, 0, 0, .1);
|
|
|
|
view {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
&:nth-child(3) {
|
|
flex: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.animate {
|
|
transition: all .4s linear;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|