前端小技巧

作为前端新手，总结了一下自己在做项目中，遇到了问题，在这里记录一下解决办法。

计算文字的高度，展开收起

• 在工作中经常遇到这类的需求，需要计算文字的高度，当达到几行之后就显示展开收起的按钮，供文字展开收起。在未达到的时候不显示此按钮。
  思路在有数据的时候先计算文字的高度，如果超过设置的高度显示展开收起的按钮，没有就不显示展开收起的按钮.

当键盘弹出时让input标签事情焦点

• 让input失去焦点，收起键盘，在前面要填写失去焦点的名称
  括号中填写的是包住input标签的div class，将input 也写上

 $('.recomd-man input').blur()

添加单元格选中的颜色

• 一个页面有多个单元格cell，需要在点击某个cell的时候添加背景选中颜色，表明选中的是这个单元格， 在点击此cell的时候用jQuery添加样式。

 $('.subscribe-list').removeClass('active')
 $('.subscribe-list').eq(val).addClass('active')

返回浏览器上一个页面

• 浏览器窗口有一个history对象，用来保存浏览历史
  如果当前窗口访问了三个网址，那么history对象就包括三项，history.length属性等于3，
  history.length // 3
  history 对象提供了一系列方法，允许在浏览历史之间移动

back():移动到上一个访问页面，等同于浏览器后退键。
forward():移动到下一个访问页面，等同于浏览器的前进键。
go():接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward（），go(-1)相当于back(),go(0)相当于刷新当前页面，如果需要刷新当前页面可以这样写：

history.go(0)

禁止遮罩视图下面的视图滚动

• 当需要加载列表页的时候，上方弹出模态窗，有遮罩视图，这时候需要将后面的列表禁止滑动，在网上搜了好多方法都是给body 或 html 添加overflow：hidden，来禁止滑动，用这种方法在web上调试的是正常的，但放到手机上并没有效果。遇到这种情况可以使用下面的这种方法，在手机上有效，但是在浏览器上调试就没有效果，正好可以解决问题。
  在要弹出的模态窗组件中添加如下方法。

// 首先定义一个变量函数
const bodyScroll = (event) => {
    event.preventDefault()
 }
 // 在视图要弹出的时候，执行如下方法
 document.addEventListener('touchmove', bodyScroll, false)
 // 这样背景视图cell就不能滑动了，当视图消失的时候我们还是需要底部视图cell列表滚动，这就需要执行如下方法，将此事件移除掉。
 document.removeEventListener('touchmove', bodyScroll, false)