vue 点击平滑到指定位置并绑定页面滑动效果

最新推荐文章于 2024-12-11 16:27:20 发布

原创

最新推荐文章于 2024-12-11 16:27:20 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

1.html元素

写出对应的数据块（注意添加ref) 用于获取元素位置

<template>
  <div class="index-page" >
       <div class="top-head" ref="index">
          <img src="logo.png" style="height: 40px;margin-right: 20px;">
          <span v-for="(item,index) in meuns" @click="scrollingTo(index)" :style="index == meunIndex? 'border-bottom: 5px solid #2461FB;color:#2461FB':''">{
  
  {item}}</span>
          <div class="head-button">
            <button>登录</button>
            <button style="color: #2461FB;background: #ffffff;">注册</button>
          </div>
       </div>
       <div class="top-slogan">
           <div>产品与服务XX介绍</div>
           <span v-for="item in texts" >{
  
  {item}}</span>
           <button>立即注册 -></button>
       </div>
       <div class="information-block" style="margin-top: -200px