前端小技巧

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

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

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

<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)