PC项目中常用的方法总结（持续更新）

css

1.省略号

1.1、文本显示一行，多的用省略号

text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden; 

1.2、设置文本显示 三行或四行，多的用省略号

text-overflow:ellipsis;
overflow:hidden;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:3; 

2、两个div设置了display：inline-blobk;内容对不齐的问题：

      1、给两个div设置浮动 左浮动 右浮动

      2、设置vertical-align:top;垂直顶部对其

      3、设置display:inline-table;

3、设置 弹窗遮罩层 弹出时，居中

3.1、即设置 fixed属性，并 居中 ，css样式设置为

{
    position:fixed;
    left:0;
    right:0;
    margin:0 auto;
}

3.2、类似模态框遮罩层实现---底层遮罩div 设置固定定位

{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:100%;
    height:100%
}

遮罩层中写要展示的内容 宽高大小, 防止页面中其他浮窗层级较高 可以设置z-index稍大一些

4、table手写表格边框，留缝如何解决?

给table元素设置 cellspacing="0"   cellpadding="0"  就可以完美解决了

JS

1、2个div，点击某个时回到顶部(**经典的返回顶部功能实现**)

  <div style="height:1000px">111111111111111</div> <div id="top" >top</div> 
    <script type="text/javascript">
    $(function(){
      $("#top").click(function() {
          $("html,body").animate({scrollTop:0}, 500);
      })
     });

2、返回上一页 功能实现

window.history.go(-1) 和 window.history.back(不加-1)  都可以实现返回上一页,

不同的是前者会对页面进行刷新,后者只是相当于浏览器后退功能.      

但是在浏览器还是有部分内容没有刷新的情况 比如说登录状态 在返回以后并没有改变 还需要F5一下才会改变 这个时候前两者都不好使了 需要  window.location.href=document.referrer;这个可以获取上一个页面的url, 重新登录一下上一次页面;

附带几个别的功能：

刷新页面

window.location.reload()  

前进到 下一个页面  

window.history.go(1)  

3、个人中心--头像显示 不想压缩图片 可以设置背景图  使用cover来设置

<div v-else id="ptt" style="width:50px;height:50px;border-radius:50%;" :style="{'background':'url('+'http://jingyou.nyjianzhan.com'+init.avatar+') no-repeat center center / cover'}"></div>

4、文本中敲击多个空格，只显示一个如何解决?

<p>yihang           zi</p>

可以设置样式 white-space:pre-wrap;  可以完美解决

5、Echarts图改变柱状图 数据展示效果

 
 
{  // series  中
  name: '9999',
  type: 'bar',
  label: {  // 柱状图返回样式
    normal: {
      formatter: function (a) {
        if (a.value === 0) {
          return '--'
        }
      }
    }
  },
  data: data,
  barWidth: 'auto',
  itemStyle: {
    normal: {
      label: {
        show: true, // 柱状图上数字
        position: 'top',
        textStyle: { // 数值样式
          color: '#fff',
          fontSize: 12
        }
      }
    }
  },
  barGap: '0'
}

6、字符串格式数据转换成数组

var arr = "[[\"288302015279272710\",\"288323442518791237\",\"288324022947550277\"]]"
// eval方法可转换
 
let newArr = eval('(' + arr + ')')

// vue 点击事件新页面打开
const { href } = this.$router.resolve({ path: `${url}`, query: { code: code } })
window.open(href,'_blank')

7、ES6取数组和、取数组最大值；

var data = [1,2,3,4,5,6]
// 1.数组求和 
let num = data.reduce((a,b)=>Number(a)+Number(b))   
// 2.数组求你最大值
let max = data.reduce((a,b)=>{return a=Number(a)>Number(b)?a:b})

8、vue页面监听滚动高度

mounted() {
   window.addEventListener('scroll',this.scrollTop,true)
},
methods:{
    scrollTop(e){ // 监听滚动高度 悬浮导航栏
        this.$nextTick(()=>{
          var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || e.target.scrollTop;
          if(top>395){
            this.isScroll = true
          }else if(top<375){
            this.isScroll = false
          }
        })
      }
}