第二期来啦，带来了新的方案和代码片段~
上期问题
经过一系列的实践，上期的方案有些问题，其中最麻烦的就是，需要对外传递一个当前index，然后控制前后数据展示；这里对于每个用到skeleton组件的页面来说，都要重复的写一个方法来承接这个index，然后渲染页面对应的数据。
优化
依然是监听skeleton曝光，这里监听的方案变为出现在屏幕上下n屏的内容块进行展示，此范围外的内容块就卸载掉。
核心代码
// 修改了监听是否显示内容的方法，改为前后showNum屏高度渲染
// 监听进入屏幕的范围relativeToViewport({top: xxx, bottom: xxx})
let info = SystemInfo.getInfo() //获取系统信息
let { windowHeight = 667 } = info.source.system
let showNum = 2 //超过屏幕的数量，目前这个设置是上下2屏
let listItemContainer = this.createIntersectionObserver()
listItemContainer.relativeToViewport({ top: showNum * windowHeight, bottom: showNum * windowHeight })
.observe(`#list-item-${this.data.skeletonId}`, (res) => {
// 此处来控制slot展示，详见代码片段
})
干货
话不多说，干货放后面，点击获取代码片段
有个问题咨询下，Node \"#list-item-5h4f4i85\" is not found. Intersection observer will not trigger. 一直拿不到组件是为什么？使用了 nextTick 和 setTimeout都不行。
为什么用了这种方法 数据存放模式也改为了二维数组了还是和原来没有变化呢 还是出现白屏？
写的真好，谢谢分享，学习到了
// 修改了监听是否显示内容的方法，改为前后showNum屏高度渲染 // 监听进入屏幕的范围relativeToViewport({top: xxx, bottom: xxx}) let info = SystemInfo.getInfo() //获取系统信息 let { windowHeight = 667 } = info.source.system let showNum = 2 //超过屏幕的数量，目前这个设置是上下2屏 let listItemContainer = this.createIntersectionObserver() listItemContainer.relativeToViewport({ top: showNum * windowHeight, bottom: showNum * windowHeight }) .observe(`#list-item-${this.data.skeletonId}`, (res) => { // 此处来控制slot展示，详见代码片段 })这个视口的top 和 bottom 不是应该为负值吗？
想问下，为什么占位用的<view>要用<slot>插入到skeleton里面，而不是直接在组件内部直接用<view>占位
棒
mark，先看代码片段学习一下，请问有遇见过频繁进出live-player组件的页面时候有一部分内存不释放的问题么.......