全面兼容手机端访问与toTop

时光潜流

发布于 2022-12-26 19:45:01

7420

发布于 2022-12-26 19:45:01

文章被收录于专栏：博客专栏

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

toTop回到顶部组件设计

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

html：

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

js：

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

scss：

#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 的结果进行判定是否为手机端从而进行不同的处理。

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

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-05-07，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度