四川建设企业网站,永久免费手机建站平台,网页设计与制作教程书,大连学网站制作uniapp封装虚拟列表滚动组件 这里用到一个列表#xff0c;然后数据可能有很多很多…#xff0c;一次性全部渲染到dom上会卡顿#xff0c;很废性能#xff0c;于是用了这个虚拟列表就变丝滑很多很多。 组件mosoweInventedList 代码#xff1a;
!-- 虚拟滚动列表组件然后数据可能有很多很多…一次性全部渲染到dom上会卡顿很废性能于是用了这个虚拟列表就变丝滑很多很多。 组件mosoweInventedList 代码
!-- 虚拟滚动列表组件mosoweInventedList --
templateview classmosowe-invented-listscroll-view classcontainer scroll-y :style{ height: boxHeight px } scrollhandleScrolldiv classmosowe-invented-wrap :style{ height: itemHeight * list.length px }div classmosowe-invented-content :style{ transform: translateY( offsetY px) }view classmosowe-invented-item v-for(item, index) in showList :keyindexslot :itemitem/slot/view/div/div/scroll-view/view
/templatescriptexport default {props: {list: {type: Array,default: () []},cacheNum: {// 前后缓存数目type: Number,default: 10}},data() {return {showList: [], // 展示的数据列表boxHeight: 0, // 组件可视区高度itemHeight: 0, // 每条数据高度计算第一条数据的高度以第一条数据高度为主offsetY: 0};},computed: {pageNum() {if (this.boxHeight this.itemHeight) {return Math.ceil(this.boxHeight / this.itemHeight) this.cacheNum;} else {return this.cacheNum;}}},watch: {pageNum() {this.setShowList(0);},list: {handler() {this.init();},deep: true,immediate: true}},mounted() {this.init();},methods: {init() {this.$nextTick(() {this.setShowList(0);let t setTimeout(() {clearTimeout(t);t null;const query uni.createSelectorQuery().in(this);query.select(.mosowe-invented-list).boundingClientRect((res) {this.boxHeight Math.floor(res?.height) || 0;}).select(.mosowe-invented-item).boundingClientRect((res) {this.itemHeight Math.floor(res?.height) || 0;}).exec();}, 100);});},handleScroll(e) {const scrollTop Math.floor(e.detail.scrollTop);this.offsetY scrollTop - (scrollTop % this.itemHeight);let startIndex Math.floor(scrollTop / this.itemHeight);if (startIndex this.cacheNum) {this.offsetY - this.cacheNum * this.itemHeight;startIndex startIndex - this.cacheNum;}this.setShowList(startIndex);this.$emit(scroll, scrollTop);},setShowList(startIndex) {this.showList this.list.slice(startIndex, startIndex this.pageNum);}}};
/scriptstyle langscss scoped.mosowe-invented-list {overflow: hidden;height: 100%;width: 100%;.container {width: 100%;height: 100%;}}
/style使用
templateview classcententmosoweInventedList :listlistData :cacheNum20template #default{ item }view classitemview classlistview classcol titleimage classmark src/static/images/layout/rectangle_9.png mode/image{{ item.yhmc }}/viewview classcol areau-count-to fontSize9rpx stylecolor: #2EC38E; classunm :endValitem.mjseparator,/u-count-totext classunitk㎡/text/viewview classcol time{{ item.jmrq }}/view/viewu-divider text/u-divider/view/template/mosoweInventedList/view
/template
