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

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

vue+element ui實現錨點定位

瀏覽:85日期: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
相關文章:
主站蜘蛛池模板: 翅片管换热器「型号全」_厂家-淄博鑫科环保 | 光伏支架成型设备-光伏钢边框设备-光伏设备厂家 | 天命文免费算命堂_自助算命_自由算命系统_长文周易 | 金属抛光机-磁悬浮抛光机-磁力研磨机-磁力清洗机 - 苏州冠古科技 | 上海质量认证办理中心 | 不干胶标签-不干胶贴纸-不干胶标签定制-不干胶标签印刷厂-弗雷曼纸业(苏州)有限公司 | 浙江栓钉_焊钉_剪力钉厂家批发_杭州八建五金制造有限公司 | 智能交通网_智能交通系统_ITS_交通监控_卫星导航_智能交通行业 | 最新范文网_实用的精品范文美文网 | 江苏齐宝进出口贸易有限公司| 探伤仪,漆膜厚度测试仪,轮胎花纹深度尺厂家-淄博创宇电子 | 石家庄小程序开发_小程序开发公司_APP开发_网站制作-石家庄乘航网络科技有限公司 | 密度电子天平-内校-外校电子天平-沈阳龙腾电子有限公司 | 铝合金电阻-无源谐波滤波器-上海稳达电讯设备厂 | 一礼通 (www.yilitong.com)-企业礼品解决方案一站式服务平台 | 喷砂机厂家_自动除锈抛丸机价格-成都泰盛吉自动化喷砂设备 | 阴离子_阳离子聚丙烯酰胺厂家_聚合氯化铝价格_水处理絮凝剂_巩义市江源净水材料有限公司 | 衢州装饰公司|装潢公司|办公楼装修|排屋装修|别墅装修-衢州佳盛装饰 | Brotu | 关注AI,Web3.0,VR/AR,GPT,元宇宙区块链数字产业 | 影像测量仪_三坐标测量机_一键式二次元_全自动影像测量仪-广东妙机精密科技股份有限公司 | 碳钢法兰厂家,非标法兰,定制异型,法兰生产厂家-河北九瑞管道 | 武汉森源蓝天环境科技工程有限公司-为环境污染治理提供协同解决方案 | 设定时间记录电子秤-自动累计储存电子秤-昆山巨天仪器设备有限公司 | 双菱电缆-广州电缆厂_广州电缆厂有限公司 | 冲击式破碎机-冲击式制砂机-移动碎石机厂家_青州市富康机械有限公司 | 不锈钢/气体/液体玻璃转子流量计(防腐,选型,规格)-常州天晟热工仪表有限公司【官网】 | 真空干燥烘箱_鼓风干燥箱 _高低温恒温恒湿试验箱_光照二氧化碳恒温培养箱-上海航佩仪器 | 棕刚玉_白刚玉_铝酸钙-锐石新材料 | 智能监控-安防监控-监控系统安装-弱电工程公司_成都万全电子 | 精密光学实验平台-红外粉末压片机模具-天津博君 | 广东护栏厂家-广州护栏网厂家-广东省安麦斯交通设施有限公司 | 缠膜机|缠绕包装机|无纺布包装机-济南达伦特机械设备有限公司 | 苏州工作服定做-工作服定制-工作服厂家网站-尺品服饰科技(苏州)有限公司 | 挖掘机挖斗和铲斗生产厂家选择徐州崛起机械制造有限公司 | 长春网站建设,五合一网站设计制作,免费优化推广-长春网站建设 | 真空乳化机-灌装封尾机-首页-温州精灌 | 蜘蛛车-高空作业平台-升降机-高空作业车租赁-臂式伸缩臂叉装车-登高车出租厂家 - 普雷斯特机械设备(北京)有限公司 | 气象监测系统_气象传感器_微型气象仪_气象环境监测仪-山东风途物联网 | 三氯异氰尿酸-二氯-三氯-二氯异氰尿酸钠-优氯净-强氯精-消毒片-济南中北_优氯净厂家 | 北京森语科技有限公司-模型制作专家-展览展示-沙盘模型设计制作-多媒体模型软硬件开发-三维地理信息交互沙盘 | 矿用履带式平板车|探水钻机|气动架柱式钻机|架柱式液压回转钻机|履带式钻机-启睿探水钻机厂家 |