Vue下实现步骤条定位到指定位置，并且滚动条实现联动效果。
效果如下：
这个位置调节滚动条指定位置的间距，顶部步骤条53像素，这里至少要给到50像素。
我这里有个document.getElementById('app')，指的是我的滚动条在id=app上，在父页面中。
如果滚动条在body上，就把document.getElementById('app')的都注释掉，用下面注释的那几行代码。
<template>
<section>
<transition v-if="!$route.meta.NoNeedHome" name="fade"
mode="out-in">
<el-row class="study-add-main">
<el-col class="study-add-title">
<i class="el-icon-document"></i> 新建学习计划
</el-col>
<el-col>
<el-col style="position:fixed;top:60px;left:0px; z-index:90;">
<div class="page-pagecontainer">
<el-steps :active="StepInfo.Active" simple>
<el-step title="基本信息" icon="el-icon-edit" @click.native="scrollTo('add-basic',1)"></el-step>
<el-step title="学习内容" icon="el-icon-s-order" @click.native="scrollTo('add-content',2)"></el-step>
<el-step title="指定学员" icon="fa fa-users" @click.native="scrollTo('add-user',3)"></el-step>
<el-step title="概要统计" icon="fa fa-users" @click.native="scrollTo('add-total',4)"></el-step>
</el-steps>
</div>
</el-col>
</el-col>
<el-col>
<el-collapse v-model="StepInfo.ActiveItemName">
<el-collapse-item id="add-basic" name="1" class="study-add-item">
<template slot="title">
<el-col class="study-add-item-title study-add-item-basic" style="padding-left:10px;">基本信息</el-col>
</template>
<el-row>
<el-col style="padding-top:20px;">
<el-form :model="addForm.StudyPlanInfo" label-width="110px" :rules="addFormRules" ref="StudyPlanInfo">
<el-row>
<el-col :offset="1" :span="20" :lg="11">
<el-form-item label="计划名称" prop="StudyPlanName">
<el-input v-model="addForm.StudyPlanInfo.StudyPlanName" maxlength="20" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :offset="1" :span="20" :lg="11">
<el-form-item label="分类" prop="ParentCategoryID">
<el-cascader style="width:100%;" v-model="addForm.StudyPlanInfo.StudyCategoryID"
:options="CategoryList"
filterable
change-on-select></el-cascader>
</el-form-item>
</el-col>
<el-col :offset="1" :span="20" :lg="11">
<el-form-item label="负责人" prop="IsPublic">
<el-switch v-model="addForm.StudyPlanInfo.FollowUser" active-value="1" inactive-value="0">
</el-switch>
</el-form-item>
</el-col>
<el-col :offset="1" :span="20" :lg="11">
<el-form-item label="开始时间" prop="Sort">
<el-date-picker v-model="addForm.StudyPlanInfo.StartDateTime" type="datetime" placeholder="请选择开始时间" style="width:100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col :offset="1" :span="20" :lg="11">
<el-form-item label="结束时间" prop="Sort">
<el-date-picker v-model="addForm.StudyPlanInfo.EndDateTime" type="datetime" placeholder="请选择结束时间" style="width:100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col :offset="1" :span="20" :lg="11">
<el-form-item label="到期通知">
<el-switch v-model="addForm.StudyPlanInfo.IsAutoNotice" active-value="1" inactive-value="0">
</el-switch>
</el-form-item>
</el-col>
<el-col :offset="1" :span="20" :lg="11">
<el-form-item label="自动归档" prop="IsAutoArchiving">
<el-switch v-model="addForm.StudyPlanInfo.IsAutoArchiving" active-value="1" inactive-value="0">
</el-switch>
</el-form-item>
</el-col>
<el-col :offset="1" :span="20" :lg="11">
<el-form-item label="重要性" prop="IsSkipChapter">
<el-input-number v-model="addForm.StudyPlanInfo.IsSkipChapter" :step="1" :max="5" :min="1" placeholder="请输入重要性" autocomplete="off" style="width:100%;"></el-input-number>
</el-form-item>
</el-col>
<el-col :offset="1" :span="20" :lg="11">
<el-form-item label="排序" prop="Sort">
<el-input-number v-model="addForm.StudyPlanInfo.Sort" :step="1" placeholder="请输入排序位置" :max="100" :min="0" autocomplete="off"></el-input-number>
</el-form-item>
</el-col>
<el-col :offset="1" :span="23" :lg="23">
<el-form-item label="描述">
<el-input v-model="addForm.StudyPlanInfo.Description" type="textarea" autocomplete="off" :autosize="{ minRows: 4, maxRows: 8}" maxlength="500" show-word-limit></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item id="add-content" name="2" class="study-add-item">
<template slot="title">
<el-col class="study-add-item-title study-add-item-content" style="padding-left:10px;">学习内容</el-col>
</template>
<el-row>
<el-col style="padding-top:20px;">
<el-form :model="addForm.ChapterList" label-width="110px" :rules="addFormRules" ref="ChapterList">
<el-row>
<el-col :offset="1" :span="20" :lg="11">
<el-form-item label="跳过学习计划章节" prop="IsSkipChapter">
<el-switch v-model="addForm.StudyPlanInfo.IsSkipChapter" active-value="1" inactive-value="0">
</el-switch>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item id="add-user" name="3" class="study-add-item">
<template slot="title">
<el-col class="study-add-item-title study-add-item-user" style="padding-left:10px;">指定学员</el-col>
</template>
<el-row>
<el-col style="padding-top:20px;">
<el-form :model="addForm.EmployeeList" label-width="110px" :rules="addFormRules" ref="EmployeeList">
<el-row>
<el-col :offset="1" :span="20" :lg="11">
<el-form-item label="学习范围" prop="StudyPlanLimit">
<el-switch v-model="addForm.StudyPlanInfo.StudyPlanLimit" active-value="1" inactive-value="0">
</el-switch>
</el-form-item>
</el-col>
<el-col :offset="1" :span="20" :lg="11">
<el-form-item label="新员工自动添加学习计划" prop="IsNewEmployeeAutoStudy">
<el-switch v-model="addForm.StudyPlanInfo.IsNewEmployeeAutoStudy" active-value="1" inactive-value="0">
</el-switch>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item id="add-total" name="4" class="study-add-item">
<template slot="title">
<el-col class="study-add-item-title study-add-item-total" style="padding-left:10px;">概要统计</el-col>
</template>
<el-row>
<el-col style="padding-top:20px;">
名称，负责人,
几个对应的是否设置选项
总学分，总学时，总知识数，学员总数
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</el-col>
</el-row>
</transition>
</section>
</template>
<script>
export default {
name: "StudyPlan_Add",
components: {},
data() {
return {
pageName: "新增学习计划",
ProgressSet: {
Colors: [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 }
]
},
StepInfo: {
Active: 1,
ActiveItemName: ['1', '2', '3', '4'], //展开所有折叠板
},
addLoading: false,
addFormRules: {
CategoryName: [
{ required: true, message: '请输入分类名称', trigger: 'blur' }
],
},
//新增界面数据
addForm: {
StudyPlanInfo: {
StudyCategoryID: 123,
StudyPlanName: "",
FollowUser: "张三",
CreateUserName: "张三",
StartDateTime: "2021-01-01",
EndDateTime: "2021-01-31",
CreateDateTime: "2021-01-01",
CreditStandard: 34,
StudyStandard: 24,
Description: "",
IsAutoNotice: 0,
IsAutoArchiving: 0,
IsSkipChapter: 0,
ImportantLevel: 0,
StudyPlanLimit: 0,
},
ChapterList: [
{
StudyPlanChapterName: "章节名称",
IsSkipChapter: 0,
Sort: 0,
ItemList: [
{
StudyPlanItemName: "名称",
ReferType: 1,
ReferID: 1234,
LearnMinutes: 12,
Credit: 6,
Sort: 1
},
{
StudyPlanItemName: "名称2",
ReferType: 1,
ReferID: 123234,
LearnMinutes: 12,
Credit: 6,
Sort: 1
}
],
},
{
StudyPlanChapterName: "章节名称2",
IsSkipChapter: 0,
Sort: 0,
ItemList: [
{
StudyPlanItemName: "名称3",
ReferType: 3,
ReferID: 12341,
LearnMinutes: 12,
Credit: 6,
Sort: 1
},
{
StudyPlanItemName: "名称4",
ReferType: 1,
ReferID: 12343,
LearnMinutes: 12,
Credit: 6,
Sort: 1
}
],
}
],
EmployeeList: [
{
EmployeeID: 1,
Name: '张三',
},
{
EmployeeID: 2,
Name: '李四',
}
],
},
}
},
methods: {
//滚动监听器
onScroll() {
const navContents = document.querySelectorAll('.study-add-item');
const offsetTopArr = [];
navContents.forEach(item => {
offsetTopArr.push(item.offsetTop);
})
//有顶部菜单，加80的高度 -无间隔加50就可以了
const scrollTop = document.documentElement.scrollTop || document.getElementById('app').scrollTop + 80;
//const scrollTop = document.documentElement.scrollTop || document.body.scrollTop.scrollTop + 80;
let navIndex = 0
for (let n = 0; n < offsetTopArr.length; n++) {
if (scrollTop >= offsetTopArr[n]) {
navIndex = n;
}
}
this.StepInfo.Active = navIndex + 1;
},
//定位到指定位置
scrollTo(tagName, index) {
this.StepInfo.Active = index;
//有顶部菜单，要减掉50的高度
const targetOffsetTop = document.querySelector('#' + tagName + '').offsetTop - 50;
// 获取当前 offsetTop
let scrollTop = document.documentElement.scrollTop || document.getElementById('app').scrollTop;
//let scrollTop = document.documentElement.scrollTop || document.body.scrollTop.scrollTop;
const STEP = 50;
if (scrollTop > targetOffsetTop) {
smoothUp(); // 往上滑
} else {
smoothDown();// 往下滑
}
// 往下滑函数
function smoothDown() {
// 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
if (scrollTop < targetOffsetTop) {
if (targetOffsetTop - scrollTop >= STEP) {
scrollTop += STEP;
} else {
scrollTop = targetOffsetTop;
}
//滚动条定位在id=app上
document.getElementById('app').scrollTop = scrollTop;
//document.body.scrollTop = scrollTop;
//document.documentElement.scrollTop = scrollTop;
window.requestAnimationFrame(smoothDown);
}
}
// 往上滑函数
function smoothUp() {
if (scrollTop > targetOffsetTop) {
if (scrollTop - targetOffsetTop >= STEP) {
scrollTop -= STEP;
} else {
scrollTop = targetOffsetTop;
}
//滚动条定位在id=app上
document.getElementById('app').scrollTop = scrollTop;
//document.body.scrollTop = scrollTop
//document.documentElement.scrollTop = scrollTop
window.requestAnimationFrame(smoothUp);
}
}
}
},
mounted() {
// 监听滚动事件
document.getElementById('app').addEventListener('scroll', this.onScroll, false);
},
destroy() {
// 必须移除监听器
document.getElementById('app').removeEventListener('scroll', this.onScroll)
},
}</script>
<style scoped>
.study-add-main {
color: #333;
font-size: 14px;
padding: 30px 20px;
padding-top: 90px;
line-height: 24px;
background-color: #fff;
}
.study-add-title {
font-size: 28px;
font-weight: bold;
text-align: center;
padding-bottom: 50px;
}
.study-add-item-title {
font-size: 22px;
padding-left: 10px;
}
.study-add-item-basic {
border-left: 5px solid #3979ff;
}
.study-add-item-content {
border-left: 5px solid #ff8e39;
}
.study-add-item-user {
border-left: 5px solid rgb(190, 25, 187);
}
.study-add-item-total {
border-left: 5px solid #fe6c6f;
}
/* 内容区的样式 */
.content {
background-color: white;
width: 500px;
}
.content div {
width: 100%;
height: 600px;
font-size: 36px;
padding: 20px;
background-color: #7ec384;
}
.content div:nth-child(2n) {
background-color: #847ec3;
}
/* 导航栏的样式 */
.navs {
position: fixed;
top: 80px;
left: 700px;
background-color: #efefef;
}
.navs li {
padding: 0 20px;
line-height: 1.6;
font-size: 24px;
}
/* 当导航被点亮后改变颜色 */
.navs .active {
color: #847ec3;
background-color: #e2e2e2;
}
</style>
<style>
.page-pagecontainer .el-step__title:hover {
color: #5eadff;
cursor: pointer;
}
<style>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
