H5开发笔记

原创

无忧366

修改于 2021-03-29 14:22:56

7960

修改于 2021-03-29 14:22:56

文章被收录于专栏：Hello world

1.css实现自动隐藏scroll滚动条但不影响滚动功能

谷歌内核webkit
.container::-webkit-scrollbar {     display: none; //SafariandChrome }
IE或者Firefox
.container {     -ms-overflow-style: none; //IE 10+     overflow: -moz-scrollbars-none; //Firefox }

2.浮层去除底部滚动

  stopBodyScroll (isFixed) {
    let bodyEl = document.body
    let top = 0
    if (isFixed) {
      top = window.scrollY

      bodyEl.style.position = 'fixed'
      bodyEl.style.top = -top + 'px'
    } else {
      bodyEl.style.position = ''
      bodyEl.style.top = ''

      window.scrollTo(0, top) // 回到原先的top
    }
  }

参考地址：https://juejin.im/post/5a27cad56fb9a045186a9d94

3.sudo npm install 报错

gyp ERR!stackError: EACCES: permission denied, mkdir

sudo npm install -g appium --unsafe-perm=true --allow-root

4.vue watch中新旧值其中某个属性一样

 watch: {
   currentData: {
      handler(newValue, oldValue) {
         console.log(newValue.type,oldValue.type);
      }
   },
   deep: true
 },

解决方法：在computed中添加一个，在watch中监控这个

watch: {
   currentData: {
     handler(newValue, oldValue) {
        console.log(newValue.type,oldValue.type);
     }
   },
     deep: true
   },
   tmpType: {
     handler(newValue, oldValue) {
       if (newValue !== oldValue) {
       //在此执行变化后需要的操作
       }
    },
     deep: true
   }
},
computed: {
   tmpType: {
     get: function() {
       return this.data.data.type;
     }
   }
}

5.axios post x-www-form-urlencoded 请求方式

使用FormData传参数

 const fd = new FormData();
 fd.append("key", "value");
 axios.post("host", fd, { headers: { "Content-Type": "application/x-www-form-urlencoded" }, }).then((res: any) => {}

6.vue项目在safari中img图片不显示

img外层包一层，img设置100%

img {
 height: 100%;
 width: 100%;
}

7.文本溢出显示...+更多


<div class="ellipsis">
 <div class="ellipsis-container">
 <div class="ellipsis-content">content</div>
 <div class="ellipsis-ghost">
 <div class="ellipsis-placeholder"></div>
 <div class="ellipsis-more">...更多</div>
 </div>
 </div>
 </div>

.ellipsis {
 position: relative;
 background: rgb(230, 230, 230);
 width: 100%;
 max-height: 42px; /* h*n */
 line-height: 21px;
 overflow: hidden;
}
.ellipsis-container {
 position: relative;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2; /* n */
 font-size: 34px; /* 末位空白宽度 */
 color: transparent;
}
.ellipsis-content {
 color: #4a4a4a;
 display: inline;/* 注掉变成省略号 */
 vertical-align: top;
 font-size: 17px; /* f */
 line-height: 21px;
 font-weight: bolder;
}
.ellipsis-ghost {
 position: absolute;
 z-index: 1;
 top: 0;
 left: 50%;
 width: 100%;
 height: 100%;
 color: #000;
}
.ellipsis-ghost:before {
 content: "";
 display: block;
 float: right;
 width: 50%;
 height: 100%;
}
.ellipsis-placeholder {
 content: "";
 display: block;
 float: right;
 width: 50%;
 height: 38px; /* h*n */
}
.ellipsis-more {
 position: relative;
 float: right;
 font-size: 12px; /* f */
 width: 50px; /* w */
 height: 18px; /* h */
 margin-top: -18px; /* -h */
}