+
95
-

回答

<template>

<view class="sickBody">
<scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll" @scrolltolower="getend">
<view class="parentDom">
<!-- <view :style="{ height: sickAllList.length * 40 + 'px' }"></view> -->
<view :style="{ height: screenHeight + 'px' }"></view>
<view class="positionRelative" :style="{ transform: getTransform }">
<view v-for="item in visibleData" :key="item.id" class="height40" >{{
item.name
}}</view>
</view>
</view>
</scroll-view>
</view>
</template>

<script>
let testdata = [];
let num = 30;
let starti = 0;

const getfakedata = function() {

for (let i = starti; i < num; i++) {
testdata.push({
id: i,
name: '疾病' + i
});
}
starti = num;
num = num + 30;

console.log(testdata);

}
getfakedata();

import {
throttle
} from '@/utils/throttle'; //防抖
export default {
props: {
// 是否展示搜索按钮
listData: {
type: Array,
default: () => []
},
itemSize: {
type: Number,
default: 40
}
},
data() {
return {

startOffset: 0,
start: 0,
end: 20,
scrollTData: 0,
count: 20,
remain: 8
// testData: []
};
},
computed: {
listHeight() {
return testdata.length * this.itemSize;
},
screenHeight() {
return testdata.length * Number(this.itemSize) + 100;
},
// 前面预留几个
prevCount() {
return Math.min(this.start, this.remain);
},
// 后面预留几个
nextCount() {
return Math.min(this.remain, this.end);
},
getTransform() {
return `translate3d(0,${this.startOffset}px,0)`;
},
visibleData() {
return testdata.slice(this.start, Math.min(this.end, testdata.length));
}
},
mounted() {

this.sickAllList = testdata;
},
methods: {
getend() {

this.getdata();
},
getdata: throttle(function() {
getfakedata();
this.sickAllList = testdata;

}, 800),


scroll(e) {
this.scrollTData = e.target.scrollTop;
this.scrollThrottle();
},
/* eslint-disable */
scrollThrottle: throttle(function() {

let scrollTop = this.scrollTData; // e.target.scrollTop;
// 此时的开始索引
this.start =
Math.floor(scrollTop / this.itemSize) - this.prevCount >= 0 ?
Math.floor(scrollTop / this.itemSize) - this.prevCount :
0;
// 此时的结束索引
this.end = Number(this.start) + Number(this.count) + Number(this.nextCount);
// 此时的偏移量
// console.log('位置', this.start, this.end);
this.startOffset = Number(this.start) * Number(this.itemSize);
}, 0)
}
};
</script>

<style lang="scss">
.sickBody {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #f4f4f4;
z-index: 99;
}

.infinite-list-container {
height: 100%;
overflow: auto;
position: relative;
-webkit-overflow-scrolling: touch;
}

.infinite-list-phantom {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: -1;
}

.infinite-list {
left: 0;
right: 0;
top: 0;
position: absolute;
text-align: center;
}

.infinite-list-item {
padding: 10px;
color: #555;
box-sizing: border-box;
border-bottom: 1px solid #999;
}

.scroll-Y {
height: 100%;
overflow-y: scroll;
}

.height40 {
height: 39px;
line-height: 39px;
width: 100%;
overflow: hidden;
border-bottom: 1px solid #d2d2d2;
}

.positionRelative {
width: 92%;
margin: 0 3%;
position: absolute;
left: 0;
top: 0;
font-size: 32rpx;
padding-bottom: 300rpx;
// height: 100%;
// width: 100%;
}

.parentDom {
position: relative;
}
</style>

throttle.js代码请查看http://ask.bfw.wiki/question/16807885411913820019.html


网友回复

我知道答案,我要回答