"/>

文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue实现锚点定位的代码怎么写

2023-07-04 13:55

关注

本篇内容主要讲解“vue实现锚点定位的代码怎么写”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue实现锚点定位的代码怎么写”吧!

具体代码如下:

vue

<el-row :gutter="20">   <el-col :span="3">    <!--导航选择事件-->    <el-menu :default-active="activeStep" @select="jump">     <el-menu-item v-for="(item,index) in menuData" :index="`${index}`" :key="item.subjectId">      <i class="el-icon-menu"></i>      <span slot="title">{{item.subjectName}}</span>     </el-menu-item>    </el-menu>   </el-col>   <!--绑定scroll事件需要监听-->   <el-col :span="21" class="scroll_cls" @scroll="onScroll">    <div v-for="(item,index) in tableObject" :key="index" >     <div class="title scroll-item" :id="item.name">{{item.name}}</div>     <el-table :data="item.rows" :key="index">      <el-table-column label="序号" type="index" width="50"></el-table-column>      <el-table-column prop="channelId" label="渠道/团队id"></el-table-column>      <el-table-column prop="channelName" label="渠道/团队"></el-table-column>      <el-table-column prop="ruleCode" label="分配方案id"></el-table-column>      <el-table-column prop="ruleName" label="分配方案名称"></el-table-column>      <el-table-column prop="ruleVersion" label="版本号"></el-table-column>      <el-table-column prop="hierarchy" label="级别">       <template slot-scope="scope">        <span>{{scope.row.hierarchy == 1 ? '项目' : '渠道团队'}}</span>       </template>      </el-table-column>      <el-table-column label="有效期">       <template slot-scope="scope">        <span>{{scope.row.beginTime + '-' + scope.row.endTime}}</span>       </template>      </el-table-column>      <el-table-column prop="creatorName" label="操作人"></el-table-column>      <el-table-column prop="createTime" label="操作时间"></el-table-column>      <el-table-column prop="orderCnt" label="关联订单">       <template slot-scope="scope">        <el-button         @click="orderHandleClick(scope.row.orderCnt)"         type="text"         size="small"        >{{scope.row.orderCnt}}</el-button>       </template>      </el-table-column>      <el-table-column label="操作">       <template slot-scope="scope">        <el-button @click="settingHandleClick(scope.row)" type="text" size="small">设置分配方案</el-button>       </template>      </el-table-column>     </el-table>     <el-pagination      v-if="item.total > 5"            size="small"      @size-change="handleSizeChange($event,index)"      @current-change="handleCurrentChange($event,index)"      :current-page="ruleForm.ageNum"      :page-sizes="[10, 30, 50, 100]"      :page-size="ruleForm.pageSize"      layout="total, sizes, prev, pager, next"      :total="item.total"     ></el-pagination>    </div>   </el-col></el-row>

js

// 滚动触发按钮高亮methods: {  onScroll(e) {            let scrollItems = document.querySelectorAll(".scroll-item");            console.log(scrollItems)            console.log(e)   for (let i = scrollItems.length - 1; i >= 0; i--) {    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离    let judge =     e.target.scrollTop >=     scrollItems[i].offsetTop - scrollItems[0].offsetTop;    if (judge) {                    console.log(i)     this.activeStep = i.toString();     break;    }   }  },  jump(index) {            console.log(index)   let target = document.querySelector(".scroll_cls");   let scrollItems = document.querySelectorAll(".scroll-item");   // 判断滚动条是否滚动到底部   if (target.scrollHeight <= target.scrollTop + target.clientHeight) {                console.log(index)                console.log(typeof index)    this.activeStep = index;   }            let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop; // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)            console.log(total)            let distance = document.querySelector(".scroll_cls").scrollTop; // 滚动条距离滚动区域顶部的距离            console.log(distance)   // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)   // 滚动动画实现, 使用setTimeout的递归实现平滑滚动,将距离细分为50小段,10ms滚动一次   // 计算每一小段的距离   let step = total / 50;   if (total > distance) {    smoothDown(document.querySelector(".scroll_cls"));   } else {    let newTotal = distance - total;    step = newTotal / 50;    smoothUp(document.querySelector(".scroll_cls"));   }   // 参数element为滚动区域   function smoothDown(element) {    if (distance < total) {     distance += step;                    element.scrollTop = distance;     setTimeout(smoothDown.bind(this, element), 10);    } else {     element.scrollTop = total;    }   }   // 参数element为滚动区域   function smoothUp(element) {    if (distance > total) {     distance -= step;     element.scrollTop = distance;     setTimeout(smoothUp.bind(this, element), 10);    } else {     element.scrollTop = total;    }   }   document.querySelectorAll('.scroll-item').forEach((item, index1) => {     if (index === index1) {       item.scrollIntoView({         block: 'start',         behavior: 'smooth'       })     }   })  },  }, mounted() {       this.$nextTick(() => {           console.log(1)           window.addEventListener('scroll', this.onScroll,true)       })    },

css

.scroll_cls {    height: 500px; overflow: auto;}

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。

到此,相信大家对“vue实现锚点定位的代码怎么写”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯