uniapp实现虚拟滚动
<scroll-viewscroll-y="true"class="scroll-Y"lower-threshold="300":style="{ height: testData.length * 40 }"@scrolltolower="lower"@scroll="scroll"><view class="parentDom"><view :s.
·
<scroll-view
scroll-y="true"
class="scroll-Y"
lower-threshold="300"
:style="{ height: testData.length * 40 }"
@scrolltolower="lower"
@scroll="scroll"
>
<view class="parentDom">
<view :style="{ height: testData.length * 40 + 'px' }"></view>
<view class="positionRelative" :style="{ top: scrollTData + 'px' }">
<view v-for="item in visibleData" :key="item.id" class="height40" @click="choseSick(item)">{{item.name}}</view>
</view>
</view>
</scroll-view>
props: {
itemSize: {
type: Number,
default: 40
}
},
data() {
return {
searchList: [],
screenHeight: 2000, //可视高度,到时候换成自己的,每条数据行高*需要展示的条数
startOffset: 0,
start: 0,
end: 50,//没屏展示多少条数据,和上面screenHeight有关系
scrollTData: 0
// testData: []
};
},
computed: {
listHeight() {
return this.listData.length * this.itemSize;
},
visibleCount() {
return Math.ceil(this.screenHeight / this.itemSize);
},
getTransform() {
return `translate3d(0,${this.startOffset}px,0)`;
},
visibleData() { //可视区域截取相关数据
return this.testData.slice(this.start, Math.min(this.end, this.testData.length));
},
testData() {
let data = [];
for (let i = 0; i < 500; i++) {
data.push({ id: i, name: '疾病' + i });
}
console.log('疾病', data);
return data;
}
},
methods:{
scroll(e) {
console.log(2, e);
let scrollTop = e.target.scrollTop;
// 此时的开始索引
this.start = Math.floor(scrollTop / this.itemSize);
// 此时的结束索引
this.end = this.start + this.visibleCount;
// 此时的偏移量
console.log('位置', this.start, this.end);
this.startOffset = scrollTop - (scrollTop % this.itemSize);
},
}
.scroll-Y {
height: 100%;
overflow-y: scroll;
}
.height40 {
height: 40px;
}
.positionRelative {
height: 100%;
overflow-y: scroll;
position: absolute;
left: 0;
top: 0;
// height: 100%;
// width: 100%;
}
.parentDom {
position: relative;
}
更多推荐
已为社区贡献9条内容
所有评论(0)