--- theme: hydrogen --- ## 前言： > 最近在做一个`微信小程序`的`直播模块`，模块里的聊天室功能是用`scroll-view + 一维数组`的形式展示的，而且也没有进行任何的优化，导致用户的体验感比较差首先模拟一下优化前的`聊天室`情况👇 ![模拟聊天室.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/84431f457e724afabbd480fb8161e628~tplv-k3u1fbpfcp-watermark.image?) 肉眼可见的蛋疼~ 但是优化还是得优化滴，不优化是不可能滴，但是在开始之前，我觉得有必要把优化步骤拆分为以下两点👇 > **1. 不再使用`scroll-into-view`设置锚点** > > 由于旧版本使用的是`scroll-view + 一维数组`的形式实现的，这就导致在数据添加后页面总会显示`加载后的最后一条信息`，而不是`加载前的最后一条信息`，因此上一任开发者使用了`scroll-into-view`属性作为数据加载后的`回位锚点`，但是由于`锚点指向`的切换和`数据加载`并不是同步发生的，这就导致出现`回弹`的现象 > **2. 大量数据的处理** > > 因为是`聊天室`功能，因此不可避免的需要加载大量的用户对话、图片等内容，又因为`scroll-view`本身并不适合加载大量的数据（太菜了想不出来其他办法😭），故而需要在数据的加载和显示部分下点功夫处理一下 > **3. 附加功能处理** > >聊天室原本还有`返回底部`等功能存在，因此在完成优化后原本的功能也不能忽略 OK开工~ ## 1、倒置scroll-view 为什么要倒置`scroll-view`呢？从上面的第一点我们可以看出，如果需要正序地插入数据，那么就会不可避免地出现`数据加载后无法显示后面数据`的情况，但是想要解决这种情况又需要使用`scroll-into-view`属性，那么如果需要彻底地解决这个问题，就需要从问题的根源`scroll-view`下手首先是`修改前`的代码👇 ```html 这是一个直播画面 {{ item.data }} ``` ```js const scrollIntoView = ref("index1"); const upper = () => { let lastNum = scrollData.value[0].data; let newArr = []; for (let index = 1; index <= 10; index++) { newArr.push({ color: getRandomColor(), data: lastNum + index, index: `index${lastNum + index}`, }); } scrollData.value.unshift(...newArr.reverse()); // 这里可以使用nextTick来替换一下，结果也是一样的，但是为了更明显的回弹效果我使用了定时器 setTimeout(() => { scrollIntoView.value = `index${lastNum}`; console.log("scrollIntoView :>>", scrollIntoView.value); }, 100); }; const getRandomColor = () => { return "#" + Math.random().toString(16).substr(2, 6); }; ``` 那么就先来试一下`倒置scroll-view`到底也没有效果首先我们需要给`scroll-view`套上一个`transform:rotate(180deg)`的属性，然后再给内部的子元素也套上同样的属性，别忘了给`存放数据的数组`也倒置一下，最重要的，把`scroll-view`上的`scroll-into-view`属性去掉，就会得到这样的效果👇 ![模拟聊天室-修改第一版.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f2ce6af0c754b66be6278d5cbb86cea~tplv-k3u1fbpfcp-watermark.image?) 还有就是此时`滚动条`的位置是在左边的，如果有需要可以使用`CSS`属性去掉，或者自行模拟，下面是去`去除滚动条的CSS样式`👇 ```css ::-webkit-scrollbar { display:none; width:0; height:0; color:transparent; } ``` 到这里还只是`第一步`，下一步是`如何下拉加载数据`。此时我们的`scroll-view`是处于`倒置`的状态，也就是说`顶部是底，底部才是顶`(搁着绕口令呢)，所以之前使用的`scrolltoupper触顶方法`要替换成`scrolltolower触底方法`才能实现“下拉加载” ![图片.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8021496353464d89b62be538d8ff5141~tplv-k3u1fbpfcp-watermark.image?) 下面是目前的`聊天室`👇看起来好多了 ![模拟聊天室-修改第二版.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/699ef845f656400e93b4bfbdc6ca4cf4~tplv-k3u1fbpfcp-watermark.image?) ## 2、大量数据的处理 ##### 处理完`回弹问题`后，就需要考虑如何`处理大量数据`。由于`uni-app`官方也在[文档](https://uniapp.dcloud.io/component/scroll-view.html)中提到`scroll-view`加载大批量数据的时候性能较差，但无奈手头上也没有别的办法，只能死马当活马医了我第一个想法就是非常经典的`虚拟列表`，但是此前所看的很多关于虚拟列表的文章都是在`web端`实现的，似乎小程序领域里并不是一个被经常采用的方法，但是所幸还是找到了如何在`微信小程序实现虚拟列表`的资料，详情可以查看这篇文章👉[微信小程序虚拟列表](https://juejin.cn/post/6984992069592809480) OK说干就干，那么第一步就是要明确`实现虚拟列表需要什么样的数据结构`，虚拟列表其实简单地说就是`当某一个模块的数据超出了可视范围就将其隐藏`，那么如何将数据分为多个模块呢？答案就是`二维数组` 首先将当前的`页码`存储起来（默认为0），当触发下拉加载动作时`页码+1`，然后以`当前页码作为下标`存入数组 ```js const currentShowPage=ref(0) const upper = () => { let len = scrollData.value[currentShowPage.value].length - 1; let lastNum = scrollData.value[currentShowPage.value][len].data; let newArr = []; currentShowPage.value += 1; for (let index = 1; index <= 10; index++) { newArr.push({ color: getRandomColor(), data: lastNum + index, index: `index${lastNum + index}`, }); } scrollData.value[currentShowPage.value] = newArr; }; ``` 当然别忘了在页面中也需要以`二维数组`的形式循环数据 ```html {{ item.data }} ``` ##### `数据结构`的问题解决了，那么接下来就是`如何判断数据模块是否超出可视范围`。首先我们需要知道`每个数据模块的高度`，其实很简单，只需要为`每个模块定义一个id`，然后在数据展示之后根据`id`获取到`该模块的节点信息`然后`按顺序存储到数组中`即可 ```js const pagesHeight = [] onReady(()=>{ setPageHeight() }) const upper = () => { ... nextTick(() => { // 每次获取新数据都调用一下 setPageHeight(); }); }; const setPageHeight = () => { let query = uni.createSelectorQuery(); query .select(`#item-${currentShowPage.value}`) .boundingClientRect(res => { pagesHeight[currentShowPage.value] = res && res.height; }) .exec(); }; ``` OK，现在我们已经知道`每个模块的高度`了，然后就是`监听模块与可视窗口的交叉范围`。这里有两种方法，一种是`JS获取可视窗口的高度与模块scrollTop进行差值计算`，另一种是`使用小程序的createIntersectionObserver方法让程序自行监听交叉区域` 这里我展示的是第二种方法，如果对第一种方法感兴趣的朋友可以向上看`第二章开头我推荐的《微信小程序虚拟列表》文章` 关于`createIntersectionObserver方法`的使用其实很简单，我们只需要把`可视窗口的id`以及`需要监听的模块id`传入即可，详情看[官方文档](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html) ```js onReady(() => { ... observer(currentShowPage.value); }); const upper = () => { ... nextTick(() => { // 每次获取新数据都调用一下 observer(); }); }; // 允许渲染的数组下标，需要设置默认值 const visiblePagesList = ref([-1,0,1]) const observer = pageNum => { const observeView = wx .createIntersectionObserver() .relativeTo("#scroll", { top: 0, bottom: 0 }); observeView.observe(`#item-${pageNum}`, res => { if (res.intersectionRatio > 0) visiblePagesList.value = [pageNum - 1, pageNum, pageNum + 1]; }); }; ``` 最后就是`在页面中判断该模块是否允许被渲染（也就是是否存储在visiblePagesList数组中）`，这里就很简单了，只需要写一个方法在页面中调用即可 ```html ``` ```js const includePage = index => { return visiblePagesList.value.indexOf(index) > -1; }; ``` 来看看效果如何👇 ![模拟聊天室-修改第三版.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/078c419b1abf4c1db8991f2ed1fd6777~tplv-k3u1fbpfcp-watermark.image?) 额...似乎没有太大区别，那我们看看页面结构到底也没有`将可视区域外的内容切换为空白view` ![模拟聊天室-修改后展示.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ad1cc2e1d05465c8817054c5d064e01~tplv-k3u1fbpfcp-watermark.image?) 成功！ ## 3、功能调整聊天室原本还有`回底功能`等，也不能忘了加上这个部分就比较简单了，只需要直接使用`scroll-view`的`scroll-top属性`，然后通过`在scroll回调中动态记载scroll-top的值即可` 下面是部分代码👇 ```html ... 回底 ``` ```js let scrollTop; const currentTop = ref(0); const showGoBottom = ref(false); const handle_scroll = throttle(event => { scrollTop = event[0].detail.scrollTop; if (scrollTop > 300) { showGoBottom.value = true; } }, 100); const handle_goBottom = () => { currentTop.value = scrollTop; nextTick(() => { currentTop.value = 0; }); showGoBottom.value = false; }; ``` 大功告成~！ ## 结语最后附上[demo仓库](https://gitee.com/huang-qihao123/virtual-list-demo) **新人文章，如果语序或者文章结构让你不太舒服还请见谅，如果有任何错误或者需要改进的地方，请务必指出，十分感谢**