网站编辑记录（个人记录）

最新推荐文章于 2025-03-18 20:43:15 发布

原创最新推荐文章于 2025-03-18 20:43:15 发布 · 434 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了使用Vue.js实现的一些交互功能，包括：点击循环列表时元素样式的动态改变，运用V-for进行双向循环，以及如何实现单侧边栏的下拉高亮效果。在循环列表中，通过绑定class实现点击后元素颜色变化；而在Vue的双向循环中，展示了如何处理图片列表的显示和隐藏；最后，详细说明了单侧边栏下拉高亮的实现思路，涉及监听滚动条位置和根据ID匹配赋予新样式。

循环的列表单个点击后，发生样式改变

:class=“typeData == item.id ? ‘OverColor’ : ‘’”

<div class="list">
          <span
            v-for="(item, index) in List"
            :key="index"
            :class="typeData == item.id ? 'OverColor' : ''"
            @click="clickList(item.id)"
          >{{ item.text }}</span>
        </div>
       data() {
           return {
                 OverColor: "",
                 typeData: "all"
    }}


clickList(data) {
      this.typeData = data;}

span {
          display: inline-block;
          font-size: 18px;
          margin-right: 50px;
          cursor: pointer;
        }
        .OverColor {
          color: #1da6ff;
        }

vue双向循环 V-for

<div v-for="(item,index) in List2" :key="index" class="Box1">
          <p>{{ item.name }}</p>
          <div class="Box1_1">
            <a
              v-for="(data,i) in item.List.slice(0,4)"
              :key="i"
              @click="ClickList(data.id,item.type)"
            >
              <p>
                <i></i>
                {{ data.title }}
              </p>
            </a>
          </div>
          <div
            v-show="item.List.length>4"
            class="Box1_2"
            @click="allClick(item.id)"
          >查看全部{{ item.List.length }}篇文章 >></div>
        </div>

图片展示内外嵌套List 展示前四个超过五条显示隐藏块计算总数

单侧边栏实现下拉至区域实现高亮

思路：监听获取滚动条的位置点实现滚动到此区域时侧边栏样式发生改变
监听滚动条数值

let top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;

对各块区域进行划分

if (top > 474 && top < 1134) {
        this.typeData = "navbar01";
      }
      if (top > 1134 && top < 1511) {
        this.typeData = "navbar02";
      }
      if (top > 1511 && top < 2217) {
        this.typeData = "navbar03";
      }
      if (top > 2217 && top < 2734) {
        this.typeData = "navbar04";
      }
      if (top > 2734) {
        this.typeData = "navbar05";
      }

当id相同时赋给一个新的样式

<ul>
            <li v-for="(item,index) in serviceNavList" :key="index">
              <a
                :href="'#'+item.id"
                :class="typeData == item.id ? 'OverColor' : ''"
              >{{ item.title }}</a>
            </li>
          </ul>

.OverColor {
          background-color: transparent;
          color: #1da6ff;
          border-bottom: 1px solid #1da6ff;
        }

效果如下
在这里插入图片描述