vue+element ui實現錨點定位
阿新 • • 發佈:2021-06-30
本文例項為大家分享了 + 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> CmqGjMtqJL<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($even程式設計客棧t,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>
// 滾動觸發按鈕高亮
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,10);
} else {
element.scrollTop = total;
}
}
document.querySelectorAll('.scroll-item'www.cppcns.com).forEach((item,index1) => {
if (index === index1) {
item.scrollIntoView({
block: 'start',behavior: 'smooth'
})
}
})
},},mounted() {
this.$nextTick(() => {
console.log(1)
window.addEventListener('scroll',this.onScroll,true)
})
},
.scroll_cls { height: 500px; overflow: auto; }
轉載自:原文連結點選這裡
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。