uniapp unitable过多数据加载卡顿的前端解决思路

解决思路分为前端和后端，前端的思路就是加载了后端拉取的1000条数据，
对1000条数据进行分割，每次展示30条，这样便可解决卡顿问题，不过渲染的体验不好，总感觉很慢，但是还能接受，要是直接展示1000条，那根本是用不了， 目前是能正常用了， 另外app原生还是可以吊打h5。
30条数据我进行下一页我无法给他显示一个加载中，他数据设置上了，方法也执行完毕了，
但是他30条数据就渲染很慢。
渲染后的效果是在执行完毕等了几秒才看到的。
(uniapp运行到app基座 会发现不管30条，还是100条都是很快的，也就是说uniapp的table在h5表现性能极差，不知道是uniapp的原因还是vue原因还是我的原因)

另外还有一个虚拟滚动的技术，个人感觉我用的现成的那个虚拟滚动并不好用各种bug（那个本来是pc端的，可能不适合手机端）,所以呢我继续用uni-table吧，然后改下组件即可，所有界面不需要动。

下面是实现代码
首先自定义组件需要监听watch 外部传递的总数据1000条数据，
然后对其进行分割生成一个新数组，只有30条。

image.png

自定义分页完整版样式

image.png

watch: {
            rows: {
                handler(newVal) {
                    this.currentPage = 1;
                    this.total = newVal.length;
                    this.splitrows = this.paginate(newVal, 1);
                    console.log("rows receive", this.splitrows.length)
                },
                deep: true,
            },
        },

分割完毕后，就可以用到uniapp的扩展组件分页了，

    <uni-pagination title="结果分页" show-icon="true" :total="total" :current="currentPage" :pageSize="pageSize"
        @change="onPageChange"></uni-pagination>

onPageChange的实现如下:

    onPageChange: function(e) {
                this.currentPage = e.current;
                this.splitrows = this.paginate(this.rows, this.currentPage);
                console.log("current", e.current, this.currentPage)
                //e={type,current} 

            }

完整代码