vue+element ui实现锚点定位


Posted in Vue.js onJune 29, 2021

本文实例为大家分享了vue + element ui 实现锚点定位的具体代码,供大家参考,具体内容如下

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" style="height:500px">
     <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"
      style="margin-top: 15px"
      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.js 相关文章推荐
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
vue在图片上传的时候压缩图片
Nov 18 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue实现锚点定位功能
Vue实现tab导航栏并支持左右滑动功能
Vue3.0写自定义指令的简单步骤记录
vue.js Router中嵌套路由的实用示例
Jun 27 #Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
vue-router中hash模式与history模式的区别
Vue-Element-Admin集成自己的接口实现登录跳转
You might like
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
Php+SqlServer实现分页显示
2006/10/09 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
php实现短信发送代码
2015/07/05 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
javascript 必知必会之closure
2009/09/21 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
利用python程序生成word和PDF文档的方法
2017/02/14 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
python中删除某个元素的方法解析
2019/11/05 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
极简的HTML5模版
2015/07/09 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
玩具公司的创业计划书
2013/12/31 职场文书
八年级英语教学反思
2014/01/09 职场文书
运动会广播稿60字
2014/01/15 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
课外活动总结
2015/02/04 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
Java中的随机数Random
2022/03/17 Java/Android