核心内容就几行,ctrl+f
搜索 mounted
第三个就是。
在纯js跑请复制 mounted
块中的代码,并去掉this.show=flase/true;
在vue下跑,没用less的话请去掉lang="less"
然后自行找个在线less编译一下style块中的内容。
这个代码主要实现了:Nav导航条根据滚动条方向显示淡入淡出效果。
Nav的定位是fixed,向下滚动导航条隐藏,向上滚动导航条出现。
<template>
<div id="demo">
<!-- 淡入淡出动画 -->
<transition name="fade">
<!-- 导航条 -->
<div class="nav"
v-show="show">
<!-- 弄点数据 -->
<a href=""
v-for="(item,index) of items"
:key="index"
:class="{active:item.active}">{
{item.title}}</a>