最近萌新制作的一个项目需要制作移动端应用, 为了减少开发成本首先想到了跨平台开发方式**uni-app** **uni-app**一共有两种渲染方式: - 一种是写 `.vue` 最后以 `web-view` 渲染出页面, 这种模式因是基于浏览器所以很容易做到在`ios`和`Android`页面保持一致, 但是这种模式有一个致命的缺点: **性能问题** - 第二种是写 `.nvue`文件, 采用 `week` 技术渲染成原生组件, 这种模式**性能**没得话说, 但是因为局限于 `week` 本身的原因, 在有些方法很难做到`ios`和`Android`页面保持一致因为性能是我优先考虑的东西, 所以这里只能使用 `nvue` 的方式去开发, 在开发页面时一般会使用`list` 包裹页面元素从而达到高性能的滚动, 本文所讨论的问题就出现在这里: 我在`DCloud插件市场`查找到的**侧滑菜单**在 `Android`平台都存在同样的问题, 因为内存回收机制只有页面打开时可视部分能正常使用, 下面不可见的地方**侧滑菜单**都失效了, 下面让我们探索原因以及解决方案. ### list app端**nvue**专用组件。在**app-nvue**下，如果是长列表，使用`list`组件的性能高于使用**view**或**scroll-view**的滚动。原因在于`list`在不可见部分的渲染资源回收有特殊的优化处理。 > Android 平台，因 `` 高效内存回收机制，不在屏幕可见区域的组件不会被创建，导致一些内部需要计算宽高的组件无法正常工作 [官网 list 组件文档](https://uniapp.dcloud.io/component/list) 问题就出现在这里, `Android`平台不可见部分的计算宽度都失效了,导致侧滑失败. 下面我来向大家汇报我的解决方法, 以及遇到的问题. ### 先来看看我的页面 ![聊天页面](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7d65369a320d467d9b7a4260a076f053~tplv-k3u1fbpfcp-watermark.image?) > 截图于 iPhone xs max平台知道了失效原因, 那我们解决方式也很简单, 只要避免计算高度宽度就好了, 我将每一条聊天列表条目和侧滑菜单单独做成一个组件. ```html ...

... ``` 让我们看看自定义组件 `` 内长什么样子. ```html

...

``` 因为局限于`week`没有提供`z-index`属性问题, 没法正确的设置此属性, **聊天列表条目主体** 将来需要覆盖在 **侧滑菜单** 上面, 所以需要把 **聊天列表条目主体** 写在后面, 可以理解为越靠后 `z-index` 值越高. [week 通用样式](http://doc.weex.io/zh/docs/styles/common-styles.html) 对于侧滑功能我们需要监听 **聊天列表条目主体 (`class="chat-item"`)** 的手指事件, 这里需要监听的事件有3个: - `@touchstart` 手指按钮下触发 - `@touchmove` 手指滑动触发 - `@touchend` 手指离开屏幕触发 ```html ``` 这里父容器为`position: relative`, 列表框**一定不能**是`position: absolute`不然不能撑开条目的高度, 侧滑菜单可以为`position: absolute`但是不能存在**宽度**或**高度**的计算. ### 加上亿点点细节 1. 加入操作时背景颜色的提示 2. 在打开过程滑动中阻止`list`滚动 3. 打开一个侧滑菜单关闭其他条目的菜单 ![8aw2n-w51xm.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb7f22091c1b4adb97c1d2260746057c~tplv-k3u1fbpfcp-watermark.image?) ## `Android低端机型或老式机型侧滑Bug` 在一些`Android`**低端机型**或**老式机型**可能存在**侧滑Bug**(侧滑卡在一半, 外部list没有接收到是否正常开关, 认为还在滑动所以无法滚动页面), 这是因为这些机型可能并不能正确的触发 `@touchend` 手指离开事件, 导致侧滑菜单计算失败. 这里的解决方案可以使用 `@touchcancel` 手指中断事件代替, 可以在组件初始化时 `uni.getSystemInfo` 检查操作系统版本. ## 全部代码 ### chart-item.nvue ```html ``` ### message.vue 这是聊天列表页面, 这里的操作很简单, `list` 有一个属性可以控制本身是否开启滚动: `scrollable`, 监听子组件 `chart-item` 发出的 `chatItemMove` 滑动进行中事件控制 `list` 是否可以滚动. ```js ... mounted() { // if(this.platform == 'ios'){ // 监听子组件是否滑动进行中 EventBus.$on('chatItemMove',(data)=>{ // 滑动已结束, list可以滚动 if(!data) this.scrollable = true // 滑动进行中, list禁止滚动 else this.scrollable = false }); // } } ... ``` 监听 `list` 的 `@scroll` 滚动触发事件, 当页面滚动时关闭所有侧滑菜单. ```js ... methods: { listScroll(e){ // if(this.platform == 'ios'){ // 当页面发生滚动时向子组件发送chatListScroll事件, 以关闭所有侧滑菜单 EventBus.$emit('chatListScroll'); // } }, } ... ``` ### 如果你对于使用`uni-app`中`nvue`模式时面对多平台有更好的方式, 欢迎来讨论.