2021年度开发问题总结（web/小程序/H5）

• element-ui的 组件使用单选按钮

场景：单选radio按钮显示了省略号/序号, 并且单击行radio按钮会全选。

解决办法：设置唯一的label值， 解决单击全选的问题，使用@change=“(scope.row)” 获取当前行数据，标签内容设置为{{null}}来取消单选按钮的序列值。

• element-ui的滚动条组件，文档上并没有相关的使用说明

场景：使用此组件：滚动条未生效或者出现横向滚动条, 并且清除横向滚动条后，如果有下拉框组件会造成底部的选项显示不全的问题。

解决办法：在使用时需要给直接父元素设置固定高度，并且要设置的高度为100%将需要滑动的html部分代码包裹起来。

（1）清除自带的横向滚动条需要设置样式： .el-scrollbar__wrap { overflow-x: hidden; }

(2) .el-select-dropdown .el-scrollbar { padding-bottom: xxx; } 解决样式异常

• element-ui的组件添加点击事件

场景：直接在标签上添加click事件没有作用。

解决办法：在标签上添加 @click.native=’xxx’或者在外面包一层div来添加点击事件。

• vue-router的跳转问题

（1）vue-router使用params方式传参，刷新页面数据丢失；使用query方式传的参数是对象的话，刷新页面数据也会丢失，需要转换为字符串传递。

（2）使用this.$router.push(obj)同样的路由对象，vue-router@3.0以上的版本会直接报错: Uncaught (in promise) NavigationDuplicated vue-router.esm.js?fe87:2089 xxx

解决办法：重写VueRouter上的push方法：

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
复制代码

（3）如果query参数都相同的话，因为视图容器里的key相同，页面是不会进行跳转/刷新/的。如果有必要去跳转同一个路由，解决办法：给query添加一个随机数(时间戳)，则url不同，页面视图可以刷新。

• 文本样式问题

(1）文本超出宽度显示省略号：(需要注意：当前元素必须为块级元素且有固定的宽度)

{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
}
复制代码

（2）文本强制换行(需要注意：父元素必须为块级元素且有固定的宽度)

word-break: break-all; // 只对英文起作用，以字母作为换行依据。
word-wrap: break-word; // 只对英文起作用，以单词作为换行依据。
white-space: pre-wrap; // 只对中文起作用。
复制代码

（3）保留文本空格符（默认多个空格、换行会被清除）

可以使用<pre/>标签 ，被包围在标签中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体；添加class样式：.white-space { white-space: pre }

• element-ui的组件列移动的问题

场景：操作表格的列上的按钮，进行左右移动时，由于数据的改变，视图也进行更新，表格的滚动条会重置为最初始地方。当表格列很多的时候，体验上很不友好。

解决办法：给表格列加上唯一的id标识，获取到点击的列的dom节点，得到当前滚动条的位置，根据左移/右移进行计算，去设置表格的滚动条位置。示例代码如下：

let DOM = document.getElementById(`col-${col.id}`).parentElement // 当前点击的那一列dom节点
let st = this.$refs.multiTable.bodyWrapper.scrollLeft // 表格滚动条的位置
if (operate === 'left') { // 左移
  this.$refs.multiTable.bodyWrapper.scrollLeft = st - DOM.clientWidth
} else if (operate === 'right') { // 右移
  this.$refs.multiTable.bodyWrapper.scrollLeft = st + DOM.clientWidth
}

• 使用相同/类似模板组件进行渲染时视图的错误问题

场景：vue单页面里如果使用多个表格/表单项组件/渲染类似模板的组件，用v-if去控制显示与隐藏。在页面上曾出现过的问题：1. 表单的必填校验的样式*号没有对应的隐藏/显示 2. 表单/表格数据已经正确的改变（确保不是数据对象没有被浅拷贝而引起的数据污染），视图没有更新。

解决办法：因为vue在渲染元素时，处于效率考虑，会尽量地复用已有的元素而非重新渲染。所以，即使使用v-if也需要添加唯一的key值, 可以重新渲染dom, 避免重复利用造成的渲染错误。

• 路由跳转时的问题

1. 使用path & query方式跳转界面，当路由的传参数据过多时候，会导致页面卡死。

2. 跳转传值的方式得配套使用：path & query 或者name & params，否则在移动端不会跳转。

• 使用van-tab组件的问题

场景：标签里的数据加载和切换页签时候，画面很卡。

解决办法：数据模型为list，在methods的异步请求里处理完数据之后，应该最后一次性给list赋值。否则：页面会看到闪烁，而且对应的标签切换的动画也会异常的卡顿，标签切换的动画效果会持续到数据处理完之后才完成。

• 关于页面的跳转操作

场景：uni-app在H5端新页面的跳转没有层级限制，小程序里最多只能有10个页面同时存在。意思是在不关闭页面的情况，最多新开10个页面，页面深度为10，超过将不予跳转。

解决办法：选择合理的跳转api。如下：

Uni.navigateTo() // 保留当前页面，跳转到应用内的某个页面
uni.redirectTo() // 关闭当前页面，跳转到应用内的某个页面。
uni.relaunth() // 关闭所有页面，打开到应用内的某个页面。
uni.switchTab() // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.navigateBack() // 关闭当前页面，返回上一页面或多级页面。
复制代码

注意：使用页面跳转的 api如：uni.navigateTo({url: ‘/pages/home/details?desc=xxx’}) 传递的参数desc 里的值如包含的一些特殊字符会被转义，从跳转的目标页面获取的参数也会错误。

• uni.showLoading()与uni.showToast()的显示问题

场景：uni-app进行请求接口前：开启加载框：uni.showLoading()，请求结束后，使用uni.hideLoading()，此时请求成功/失败的弹窗都会受到影响。uni.showToast()会直接关闭

uni.showLoading()，而后面的uni.hideLoading()也会直接关闭弹窗，导致：在安卓手机上面会显示弹窗一闪而过，苹果机上面不显示弹窗。

解决办法：uni.showToast()和uni.showLoading()不要同时使用，因为使用的组件代码都是一样的，可以写自定义的loading组件或者给按钮添加loading效果代替，或者定时器进行弹窗（体验不完美）。还有就是如果uni.showToast()后面有uni.showLoading()，弹窗里的内容一样不会显示。我也是服了这玩意儿了~

• 下边界样式的问题

移动端H5/小程序中：给html上最后一个div设置margin-bottom在安卓机可以，ios不生效，只能在外面添加一个div,设置padding-bottom解决

• new Date()的一些api操作在安卓和IOS的返回值不一致问题

场景：之前做的考勤管理模块，需要使用到日期的比较和时间的倒计时，在模拟器及安卓机上都正常，唯独ios中发生错误，最终定位到：new Date()的操作在安卓和ios处理不同。

解决办法：

（1） ios不支持 - 连接的日期：如：2020-01-01，应该使用 / 代替。

（2） 需要使用uni.getSystemInfo() 判断系统类型，去做对应的结果处理。

• 使用input原生组件的问题

场景：给input绑定focus事件，点击显示右侧的【取消】按钮，在手机上实测会卡顿一下（延迟约0.5-1.0秒）。

解决办法：需要绑定事件到input输入框外面的view。 如果在input输入框上叠加了某个按钮，即使改变层级和阻止冒泡/默认事件，点击按钮也是不生效的。 只会触发input的focus事件。

• 使用textarea原生组件的问题

场景：

（1）textarea组件为原生组件层级最高，设置z-index没有作用，穿透弹窗或遮罩层。

（2）手指放在textarea文本框时候，滚动页面无反应；手指放在空白处进行页面滚动时，textarea里填写的文本会跟着晃动、抖动（真xx见了鬼了）

（3）textarea里面输入文字后，外面有绝对定位的 view /button的标签，使用 z-index 不起作用，这些文字会显示在最上层，如果是按钮，会导致按钮点击无反应，只会触发textarea文本框focus事件。

解决办法：

（1）弹窗时候隐藏掉textarea, 一般用户很少关注到下面，关闭弹窗时再显示出来。

（2）使用vi-if, 单独写一个view仅做展示时使用 在textare文本输入确定的事件里或者是onPageScroll进行页面滚动监听，进行对应v-if变量的控置。与textarea文本框进行切换展示。

（3）在样式上尽量避免有标签定位在textarea组件上