业务虚拟列表简单实现

这里是一个示例，演示了如何将你的代码改造为一个简单的虚拟列表：

<template> 
    <div class="virtual-list-container" ref="container" @scroll="handleScroll" > 
        <div class="virtual-list-item"
        v-for="(item, index) in visibleItems"
        :key="item.id"
        :style="{ transform: 'translateY(' + item.top + 'px)' }"
        @mouseleave="delBorder(item, index)"
        @mouseenter="addBorder(item, index)"
        @click.stop="handle(item.id, item.yjType, fwTabIndex)" >
            <img :src="baseUrl + item.productImgpc" alt="" />
            <p class="name">{{ item.productTitle }}</p>
            <div class="price_c"> 
                <p v-if="item.yjType == 0" class="price">￥{{ item.patentServePrice }}</p>
                <p v-else class="price">￥{{ item.subTicketPrice }}</p>
                <img v-show="item.mdLable == 1" src="@/images/mdicon.png" alt="" />
                <img v-show="item.yhLable == 1" src="@/images/yhicon.png" alt="" /> 
            </div>
            </div> 
    </div>
</template>

<script>
export default { 
    data() {
        return { 
            visibleItems: [], 
            itemHeight: 100, // 设置每个列表项的高度，需要根据实际情况调整
            scrollTop: 0 
        };
    }, 
    computed: { 
        totalHeight() { 
            // 计算整个列表的高度 
            return this.productListDetail.length * this.itemHeight; }
        }, 
    mounted() { 
        this.updateVisibleItems(); 
    },
    methods: { 
        handleScroll() { 
            // 更新滚动位置，并重新计算可见列表项 
            this.scrollTop = this.$refs.container.scrollTop; this.updateVisibleItems(); 
        }, 
        updateVisibleItems() { 
            // 根据滚动位置计算可见列表项的索引范围 
            const startIndex = Math.floor(this.scrollTop / this.itemHeight); 
            const endIndex = Math.min( startIndex + Math.ceil(this.$refs.container.clientHeight / this.itemHeight), this.productListDetail.length ); 
            // 更新可见列表项数组 
            this.visibleItems = this.productListDetail.slice(startIndex, endIndex).map((item, index) => ({ ...item, top: (startIndex + index) * this.itemHeight })); }, 
        addBorder(item, index) { 
            // 添加边框样式 // 实现添加边框的逻辑 
        },
        delBorder(item, index) { 
            // 移除边框样式 // 实现移除边框的逻辑 
        },
        handle(id, yjType, fwTabIndex) {
            // 处理点击事件 // 实现点击事件的逻辑 
        }
    } 
}; 
</script>