引子
通常一个页面会有回到顶部的按钮,这样可以快速回看以往的内容。除此之外,对于我们这个网站目录可以悬浮,这样可以快速看到对应类别的商品。
1.回到顶部按钮
在pages/index.vue的类别代码中添加回到顶部按钮,如下:
<div class="recommend-category-box">
<ul class="clear-fix" >
<li :class="item.favorites_id!==currentFavoriteId?'float-left':'float-left recommend-menu-active'" v-for="(item, index) in categories" :key="index"
@click="onCategoryItemClick(item)">
{{item.favorites_title}}
</li>
<!--回到顶部按钮-->
<li class="float-right">回到顶部</li>
</ul>
</div>
这里还需要在layouts/default.vue中添加右浮动的代码:
.float-right{
float: right;
}
这样全局就可以共用了。页面效果如下:
使用饿了吗UI进行美化,即在class中添加"el-icon-upload2"删除文字即可,然后继续美化,对回到顶部的标签设置如下:
<!--回到顶部按钮-->
<li class="float-right el-icon-upload2 back-top"></li>
为了能够全局共用,则在layouts/default.vue中添加如下代码:
.back-top:hover{
border: #c9302c 1px solid;
}
.back-top{
height: 30px;
width: 30px;
margin-top: 15px;
margin-bottom: 15px;
border-radius: 50%;
line-height: 30px;
text-align: center;
border: #8c8c8c 1px solid;
color: #8c8c8c;
}
2.固定菜单栏
修改菜单所在盒子原为class改为id并修改对应css的标签选择器,然后修改如下css:
#recommend-content-list-box{
margin-top: 100px;
box-shadow: 0 5px 10px #d4d4d4;
}
#recommend-category-box{
height: 60px;
line-height: 58px;
position: fixed;
z-index: 1000;
top: 90px;
width: 1140px;
background: white;
box-shadow: 0 5px 10px #d4d4d4;
}
完善滑动页面菜单栏变化: 构建一个监听事件:
// vue周期函数(页面出现之前)
mounted() {
this.onScroll(); // 中间刷新也跳上去
let listBox = document.getElementById("recommend-content-list-box");
if (listBox){
listBox.style.minHeight = document.documentElement.clientHeight + 'px';
}
window.addEventListener('scroll', this.onScroll)
},
然后,在methords中添加如下函数:
onScroll(){
let menuBox = document.getElementById('recommend-category-box');
if (menuBox){
let dy = document.documentElement.scrollTop; // 获取滑动间距
if (dy < 90){
menuBox.style.top = (90 - dy) + 'px';
}else {
menuBox.style.top ='0px';
}
}
},
3.回到顶部事件
为回到顶部设置链接:
<!--回到顶部按钮-->
<li class="float-right ">
<a href="#top">
<span class="el-icon-upload2 back-top"></span>
</a>
</li>
然后调整span对应的样式(在layouts/default.vue中):
.back-top:hover{
color: #c9302c;
border: #c9302c 1px solid;
}
另外一种方式就是,点击菜单的时候直接回到顶部,如下:
onCategoryItemClick(item){
// document.documentElement.scrollTop = 0;
this.currentFavoriteId = item.favorites_id;
this.currentCategory = item.favorites_title.split("").join("<em>/</em>");
// 加载内容
this.loadContentByCategory(item.favorites_id);
},