前言

一，vue开发移动端1px像素问题

使用伪类元素解决 transform:scaleY(0.5)

.border-after {
  position: relative;

  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 1px;
    background-color: #d7e0e6;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}

在项目开发中想必大部分人都遇到过回到顶部这样的需求，那怎么样才能平滑滚动到顶部呢，接下来一起来探索一下。

二，vue+js 页面平滑滚动到顶部

1，封装一个公共得js,publicFun.js

/**
 * description: 点击返回顶部的(平滑滚动)公共方法
 * author: 愿醒静卧忘尘谷
 */
export function public_back_top() {
  let top = document.documentElement.scrollTop || document.body.scrollTop
  // 实现滚动效果
  const timeTop = setInterval(() => {
    document.body.scrollTop = document.documentElement.scrollTop = top -= 50
    if (top <= 0) {
      clearInterval(timeTop)
    }
  }, 10)
}

在页面中引用时

  <div class="back_to_top cursor_pointer" @click="public_back_top()">
      Back to top
    </div>
<script>
import { public_back_top } from '@/components/publicFun/index'
export default {
      data(){
         return {
          }
 
         },
      methods:{
           public_back_top ,
       
      }


   }
</script>

三，img在a标签中不留间隙

img{
    vertical-align: middle;
}