第二期来啦，带来了新的方案和代码片段~

第一期点此查看

上期问题

经过一系列的实践，上期的方案有些问题，其中最麻烦的就是，需要对外传递一个当前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展示，详见代码片段
        })
       

干货

话不多说，干货放后面，点击获取代码片段