CSS样式:
<style>
* {
margin: 0;
padding: 0;
}
html, body, #app {
height: 100%;
}
#app {
display: flex;
flex-direction: column;
overflow: hidden;
}
section {
flex: 1;
overflow-y: auto;
}
li {
height: 28px;
line-height: 28px;
border-bottom: 1px solid #000000;
}
header, footer {
height: 40px;
background: red;
}
.gotop {
width: 50px;
height: 50px;
position: fixed;
bottom: 20px;
right: 20px;
border: 1px solid blue;;
border-radius: 50%;
}
</style>
<body>
<div id="app">
<header>头</header>
<section v-gotop>
<ul>
<li v-for="item in 200" :key="item">{{ item }}</li>
</ul>
<!-- <div class="gotop" @click="goTop">goTop</div> -->
</section>
<footer>尾</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<script>
// goTop 组件的配置对象
const goTop = {
data () {
return {
visible: false
}
},
template: `
<div v-show="visible" class="gotop" @click="goTop">点我</div>
`,
methods: {
//点击回到顶部函数
goTop () {
this.$el.parentElement.scrollTop = 0
}
}
}
// 注册一个全局自定义指令 `v-gotop`
Vue.directive('gotop', (el, binding) => {
// 1. 使用 Vue.extend() 方法来扩展 Vue , 得到一个 Vue 子类
const GoTop = Vue.extend(goTop)
// 2. new GoTop 生成 GoTop 的实例
const instance = new GoTop()
// 3. instance.$mount() 进行挂载。但是不要提供挂载点。
// 这个 instance 就有了 $el 属性
instance.$mount()
// 4. 就将这个 DOM 对象插入到 el 中
el.appendChild(instance.$el)
// 5. 当前元素的滚动条大于可视高度时,出现回到顶部的按钮
el.addEventListener('scroll', () => {
if (el.scrollTop >= el.clientHeight) {
instance.visible = true
} else {
instance.visible = false
}
})
})
const vm = new Vue({
el: '#app'
})
</script>
</body>