全面兼容手机端访问与toTop

    今天完成了一个重要的大工程，那就是我的网站已经可以全面兼容手机端访问啦！虽然可能不是很好看，至少完成了应该有的功能。

toTop回到顶部组件设计

    动态页面多了一个“回到顶部”的功能，这样就算翻到最下面也可以快速回到顶部。（这次没用totopcat，而是自己简单写了个小组件）

html：

代码语言：javascript复制

<div id="goToTop" @click="toTop">回到顶部</div>

js：

代码语言：javascript复制

toTop () {
    document.querySelector('#dynamic').scrollTo(0, 0)
}

scss：

代码语言：javascript复制

#goToTop{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 12%;
    bottom: 10%;
    background-color: rgb(190, 187, 187);
    padding: 2px;
    box-sizing: border-box;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 17px;
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);
    transition: .4s 0s ease-in;
    cursor: pointer;
    &:hover{
      background-color: rgb(255, 255, 255);
      color: rgb(163, 162, 162);
      box-shadow: 4px 6px 20px rgba(0,0,0,.5);
      transform: rotateZ(360deg);
    }
}

适配手机端访问

    这部分，最最最主要的用的是@media screen and (max-width: 800px){...} ，我这里将<800px的端就以手机端的UI方式显示。通过调节每个页面的组件，来实现不同端的访问效果。同时还有flex弹性盒子布局也是经常用的，因为它能够有着很强的适应能力。其有属性justify-content来对盒子布局，flex-direction来决定盒子的方向等等。

    对于html的转换，则是基于 document.body.clientWidth > 800 的结果进行判定是否为手机端从而进行不同的处理。

    此外，首页在手机端无需添加，我以动态页作为手机访问的首页，所以每次访问/时，需要将路由转走，采用如下逻辑。

代码语言：javascript复制

const res = document.body.clientWidth > 800
this.$store.state.isPc = res
if (!res && this.$route.fullPath === '/') {
  this.$router.push('/Dynamic').catch(err => err)
}

    这样下来前端大概会停止一段时间更新了吧，后面将会重点在后端的调优与数据安全方面进行进一步的研究与实现。友链的申请当然也是迫在眉睫的，哈哈。

html

0 人点赞