电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue+element ui實現錨點定位

瀏覽:86日期:2022-09-28 14:47:28

本文實例為大家分享了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' @scroll='onScroll'> <div v-for='(item,index) in tableObject' :key='index' style='height:500px'> <div :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
相關文章:
主站蜘蛛池模板: 红酒招商加盟-葡萄酒加盟-进口红酒代理-青岛枞木酒业有限公司 | 全自动固相萃取仪_高通量真空平行浓缩仪-勤业永为 | 上海恒驭仪器有限公司-实验室平板硫化机-小型平板硫化机-全自动平板硫化机 | 阜阳在线-阜阳综合门户| 等离子表面处理机-等离子表面活化机-真空等离子清洗机-深圳市东信高科自动化设备有限公司 | 深圳彩钢板_彩钢瓦_岩棉板_夹芯板_防火复合彩钢板_长鑫 | 兰州牛肉面加盟,兰州牛肉拉面加盟-京穆兰牛肉面 | 强效碱性清洗剂-实验室中性清洗剂-食品级高纯氮气发生器-上海润榕科学器材有限公司 | 周口风机|周风风机|河南省周口通用风机厂 | 磁棒电感生产厂家-电感器厂家-电感定制-贴片功率电感供应商-棒形电感生产厂家-苏州谷景电子有限公司 | 主题班会网 - 安全教育主题班会,各类主题班会PPT模板 | 灌木树苗-绿化苗木-常绿乔木-价格/批发/基地 - 四川成都途美园林 | 北京易通慧公司从事北京网站优化,北京网络推广、网站建设一站式服务商-北京网站优化公司 | 客服外包专业服务商_客服外包中心_网萌科技 | 红酒招商加盟-葡萄酒加盟-进口红酒代理-青岛枞木酒业有限公司 | 压滤机-洗沙泥浆处理-压泥机-山东创新华一环境工程有限公司 | 暴风影音| 工业CT-无锡璟能智能仪器有限公司| 运动木地板厂家_体育木地板安装_篮球木地板选购_实木运动地板价格 | 2025福建平潭岛旅游攻略|蓝眼泪,景点,住宿攻略-趣平潭网 | 千斤顶,液压千斤顶-力良企业,专业的液压千斤顶制造商,shliliang.com | 上海电子秤厂家,电子秤厂家价格,上海吊秤厂家,吊秤供应价格-上海佳宜电子科技有限公司 | 中央空调温控器_风机盘管温控器_智能_液晶_三速开关面板-中央空调温控器厂家 | 成都治疗尖锐湿疣比较好的医院-成都治疗尖锐湿疣那家医院好-成都西南皮肤病医院 | 真空干燥烘箱_鼓风干燥箱 _高低温恒温恒湿试验箱_光照二氧化碳恒温培养箱-上海航佩仪器 | 400电话_400电话申请_866元/年_【400电话官方业务办理】-俏号网 3dmax渲染-效果图渲染-影视动画渲染-北京快渲科技有限公司 | 上海防爆真空干燥箱-上海防爆冷库-上海防爆冷柜?-上海浦下防爆设备厂家? | 空压机商城|空气压缩机|空压机配件-压缩机网旗下商城 | 气动调节阀,电动调节阀,自力式压力调节阀,切断阀「厂家」-浙江利沃夫自控阀门 | 冷热冲击试验箱_温度冲击试验箱价格_冷热冲击箱排名_林频厂家 | 西安标准厂房_陕西工业厂房_西咸新区独栋厂房_长信科技产业园官方网站 | 根系分析仪,大米外观品质检测仪,考种仪,藻类鉴定计数仪,叶面积仪,菌落计数仪,抑菌圈测量仪,抗生素效价测定仪,植物表型仪,冠层分析仪-杭州万深检测仪器网 | 罗茨真空机组,立式无油往复真空泵,2BV水环真空泵-力侨真空科技 | 重庆轻质隔墙板-重庆安吉升科技有限公司 | 水冷式工业冷水机组_风冷式工业冷水机_水冷螺杆冷冻机组-深圳市普威机械设备有限公司 | 日本东丽膜_反渗透膜_RO膜价格_超滤膜_纳滤膜-北京东丽阳光官网 日本细胞免疫疗法_肿瘤免疫治疗_NK细胞疗法 - 免疫密码 | 塑料撕碎机_编织袋撕碎机_废纸撕碎机_生活垃圾撕碎机_废铁破碎机_河南鑫世昌机械制造有限公司 | 铝合金电阻-无源谐波滤波器-上海稳达电讯设备厂 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | ZHZ8耐压测试仪-上海胜绪电气有限公司 | 自进式锚杆-自钻式中空注浆锚杆-洛阳恒诺锚固锚杆生产厂家 |