作为前端新手，总结了一下自己在做项目中，遇到了问题，在这里记录一下解决办法。
计算文字的高度，展开收起
- 在工作中经常遇到这类的需求，需要计算文字的高度，当达到几行之后就显示展开收起的按钮，供文字展开收起。在未达到的时候不显示此按钮。
思路在有数据的时候先计算文字的高度，如果超过设置的高度显示展开收起的按钮，没有就不显示展开收起的按钮.
<template>
<div class="des-bd">
<div class="prd-info">
<h5>{{ $t("message.productionInfo") }}</h5>
<div class="more-desc" v-show="showMoreDesc" @click="moreDesc">
<li class="pull-icon"></li>
</div>
</div>
<div class="text-des">
<pre class="des-ele" v-html="dealDes(prdInfo.description)"></pre>
</div>
</div>
</template>
<script>
dealDes (html) {
// 设定产品高度为 100rem
const rem = parseFloat($('html').css('font-size'))
const minHeight = 100 / 75 * rem
const ele = $('.des-ele').clone()
const eleContainer = $('.text-des')
ele.html(html)
ele.css({
position: 'absolute',
top: 0,
left: 0,
opacity: 0
})
eleContainer.append(ele)
const desEleHeight = ele.height() // rem2px
ele.remove()
if (desEleHeight > minHeight) {
eleContainer.addClass('hide')
this.showMoreDesc = true
}
return html
}
moreDesc () {
$('.text-des').toggleClass('hide')
$('.pull-icon').toggleClass('transform-pull')
}
</script>
当键盘弹出时让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)
