![cover](https://img-blog.csdnimg.cn/983bfac2b43548d882cefa33935bc6b0.jpeg)
Vue项目中实现页面滚动到顶部功能
本文基于Vue2+element-ui技术栈,通过scrollTo方法实现页面滚动到顶部功能
·
写在前面
- 本文技术栈基于 Vue2+Element-ui,通过点击按钮来实现页面回滚到顶部的功能,适用场景主要是管理后台的一些表格数据页面
简单案例
- 这次使用的是scrollTo方法,可以使界面滚动到给定元素的指定坐标位置;
element.scrollTo({
top: 100,
left: 100,
behavior: "smooth",//平滑滚动
});
- 根据element-ui我在本地项目写了个demo页面,布局样式啥的我就直接放代码了;
- 整体页面主要包括顶部搜索栏目和内容区域以及置顶按钮,顶部栏目和置顶按钮都用上了
sticky
粘性定位,确保位置固定,在滚动时内容不会被覆盖;
1.页面代码
<template>
<div>
<el-card class="top-card">
<div class="search-wrap">
<div class="btns">
<el-button type="primary" size="small">新增</el-button>
</div>
<div class="search-item">
<span>北极星:</span>
<el-input v-model="value" placeholder="请输入" style="width: 180px"></el-input>
</div>
<div class="search-item">
组织:
<el-select v-model="modelVal" placeholder="请选择" style="width: 200px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
<div class="end">
<el-button type="primary" size="small">搜索</el-button>
<el-button type="plain" size="small">重置</el-button>
</div>
</el-card>
<el-card class="center-card" ref="centerCardRef">
<div>
<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" stripe>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
<div class="pagination-wrap">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
>
</el-pagination>
</div>
</el-card>
<span class="to-top" @click="handleToTop">
<i class="el-icon-download"></i>
</span>
</div>
</template>
<script>
export default {
data() {
return {
currentPage4: 4,
value: '',
modelVal: '',
options: [
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '蚵仔煎'
},
{
value: '选项4',
label: '龙须面'
},
{
value: '选项5',
label: '北京烤鸭'
}
],
tableData: [
{
date: '2016-05-02',
name: 'beiid',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-01',
name: '北京举行虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-03',
name: '大师课烂大街',
address: '上海市普陀区金沙江路 1518 弄'
}
]
};
},
created() {
let i = 3;
while (i > 0) {
this.tableData = this.tableData.concat([...this.tableData]);
i--;
}
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
handleToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
}
};
</script>
<style lang="less" scoped>
.top-card {
position: sticky;
top: 0;
z-index: 20;
margin-bottom: 15px;
.end {
display: flex;
justify-content: flex-end;
}
.search-wrap {
display: flex;
padding: 10px 0 10px 10px;
.btns {
margin-right: 20px;
}
.search-item {
margin-right: 20px;
}
}
}
.center-card {
.pagination-wrap {
display: flex;
justify-content: flex-end;
margin-top: 15px;
padding-bottom: 10px;
}
}
.to-top {
position: sticky;
bottom: 15%;
left: 90%;
z-index: 20;
font-size: 30px;
color: #74b9ff;
cursor: pointer;
i {
transform: rotate(180deg);
}
}
</style>
2.页面效果
- 初始页面效果如图
- 页面滚动之后,可以看到搜索栏目以及按钮位置固定切不会被覆盖
3.滚动函数
- 主要就是scrollTo方法;
- 加上下面方法之后也是轻松的实现了功能,于是考虑 将此页面接入实际项目中;
handleToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
},
在实际项目中使用
1.遇到的问题
- 当我把这个页面放入实际项目中时,却发现
window.scrollTo
方法不再生效; - 在翻阅了一些文章以及官方api之后,了解到核心点还是调用
scrollTo
方法需要作用到滚动容器上,因为上面的demo案例是单纯的一个页面,并没有像实际项目中那样中页面层层嵌套; - 所以解决方式就是在项目中找到滚动的容器,获取元素并调用此方法;
2.解决方式
- 根据上面的思路打开浏览器找出滚动容器
- 如下图:
- 找到之后,我们修改滚动方法;通过querySelector方法拿到Element对象,调用scrollTo方法实现滚动到顶部的功能
handleToTop() {
const scrollEle = document.querySelector('.contentContrnier')
console.log(scrollEle.scrollTop);
scrollEle.scrollTo({
top: 0,
behavior: 'smooth'
});
},
3.关于置顶按钮的小优化
- 对于滚动距离太小以及初始化时不展示此按钮,达到一定距离时再展示
- 主要是通过onscroll方法监听滚动事件,从而获取滚动距离,并且通过计算属性返回值控制按钮的显隐效果
写在最后
- 除了上面的方法,还有scrollIntoView() ,scroll()等方法,可以根据实际情况来进行选择;
- 另外,考虑到大多数报表页面较为统一,可以把置顶功能以及整体布局逻辑抽离出来,结合实际情况把它作为一个layout组件去使用;
- 最后,如果本文能够给到你启发或是帮助的话,麻烦点个赞哈,谢谢~~
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)