微信小程序列表触底后，异步载入新的数据。随着页面数据多少，微信小程序的性能随之遭受考验：页面异常卡顿，严重闪屏，退出。微信小程序官方深知此问题，推出recycle-view组件，只为解决以下几个问题：

- 列表数据很大，首次 setData 的时候耗时高
- 渲染出来的列表 DOM 结构多，每次 setData 都需要创建新的虚拟树、和旧树 diff 操作耗时都比较高
- 渲染出来的列表 DOM 结构多，占用的内存高，造成页面被系统回收的概率变大。

对于常规显示可使用recycle-view组件，可recycle-view组件已封装好，灵活性大失。沿着其思路，打造私人定制版。主要监听滚动条，监听当前滚动位置，显示前后3页的数据。

HTML<block wx:for="{{list}}"  wx:for-index="index" wx:for-item="item">
    <view class="item-box" style="height:{{item.height}}">
        <block wx:if="{{item.page >= current - 1 && item.page <= current + 1}}">
            <!-- 需要显示的内容 -->
        </block>
        <block wx:else>
            <!-- 占位符 -->
        </block>
    </view>
</block> 

JSdata: {
    list: [ 
        {id: 1, page: 1, height: 300},
        {id: 2, page: 1, height: 300},
        {id: 3, page: 2, height: 300},
        {id: 4, page: 2, height: 300},
        {id: 5, page: 3, height: 300},
        {id: 6, page: 3, height: 300},
    ],
    pageScrollHeight:{1:600,2:1200,3:1800} ,
    current: 1
},
onPageScroll: function(e) { // 监听滚动事件
    let scrollTop = e.scrollTop;
    this.setSwitchPage(scrollTop);
},
setSwitchPage: function(scrollTop) {
    var list = this.data.pageScrollHeight;
    var total = base.getDataLength(list);
    if(total == 0) {
        return false;
    }

    for(var i = total; i >= 0; i--) {
        var limit = i != 1 ? list[i-1]: 0;
        if (scrollTop >= limit && scrollTop <= list[i]) {
            if (this.data.current != i) {
                this.setData({'current': i });
            }
            return false;
        }
    }
} 

初始受Javascript的影响，想精确控制每个元素显示，判断元素位置，修改setData显示或隐藏。但微信小程序里，监听滚动太快，setData修改显示或隐藏会导致调用太多，反而变卡顿，意味着微调数据是不可能的。

滚动只能减少使用setData，粗控显示内容，改成页数范围内显示。微信小程序setData修改数据有延时性，为了避免渲染空白，需要占位符，可参考微博小程序。