手机端的两个常见问题

我是一个可爱的小前端
547 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第七天，点击查看活动详情。

1.jpg

平时web端写的比较多
记录一下这次写手机端遇到的两个问题
祝愿看到文章的朋友身体健康；如果可以麻烦一键三连

前言：

1、技术使用的是vue-cli+vant

2、页面跳转使用的是vue-router

问题一：列表点击之后变灰的效果

思路：使用标签的visited选择器

对于visited，我之前存在的几个错误认知点

  1. 所有标签都有hover、visited、active状态
    1. 其实是所有标签都有hover状态（鼠标划过样式）和active状态（鼠标按下状态）
    2. 只有a标签有link状态和visited状态，link表示默认的状态，visited表示访问过后的状态
  2. link、hover、visited、active他们四个的书写顺序没有特殊要求
  3. visited是href绑定的地址链接访问过后的状态，并且这个状态浏览器会一直记住，刷新页面也不会改变；当我们清除浏览器历史记录的时候就会恢复正常状态

几个重要的点：

  1. 我们一般点击区域都不止是一段文字，可能需要将点击区域表达，所以绑定事件的时候不想让href跳转，但是又想使用访问过后的状态；
  • 按照下面这样写是不会触发访问状态的
<a class="fd-a" href="javascript:void(0)">这是一个a标签/a>
  • 要触发访问状态需要添加#，这样也只是将当前的地址带上hash值，并不影响当前路径解析，修改之后的写法：
<a class="fd-a" href="#javascript:void(0)">这是一个a标签/a>
  1. visited状态匹配的是跳转地址，两个不同的标签绑定相同的地址，点击一个另外一个也会变为访问过后的状态
<a class="fd-a" href="#javascript:void(0)">这是一个a标签/a>
<a class="fd-a" href="#javascript:void(0)">这是一个a标签/a>
  1. 一般我们的列表都是循环出现的，所以需要动态的绑定href值，下面是项目的部分代码
<a class="fd-list-item"
    v-for="(item,index) in activeData"
    :key="`${activeTabKey}${index}`"
    :href="`#qt${activeTabKey}${index}`"
    @click="goDetail(item)">
    <span class="fd-list-text" v-html="item.wzbt"></span>
    <span class="fd-list-time">{{item.fbsj}}</span>
</a>

a:link {
    .fd-list-text {
        color: #3d3d3d;
    }
}


a:visited {
    .fd-list-text {
        color: #7a7a7a;
    }
}

这样就完美解决了，但是用a标签包裹其他标签是不规范的，如果有更好的实现方法欢迎留言~

问题二：列表需要加载动画

思路：这个就比较简单了，加一个css动画搞定

在循环的标签上加一个动画

.fd-list-item {
    animation: one-in 0.5s linear;
}


@keyframes one-in {
    from {
        margin-top: 15px;
    }


    to {
        margin-top: 0;
    }
}

执行一个从下到上过渡的动画；首先列表是挨着展示的，所有列离顶部15px，然后变成0，动画效果就出来了

avatar
文章
阅读
粉丝