标签:top active 鼠标 nat play class settime image round
html:
<a v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)" @click="backTOP" style="width: 39px;height: 39px;position: fixed;bottom: 119px;right: 3px;z-index: 999;"> <!-- style="width: 100%;height: 39px;position: absolute;bottom: 80px;z-index: 9000px;" --> <el-image v-show="txt1" src="/static/xygIMG/上拉.png" style="width: 39px;height: 39px;"></el-image> <span v-show="!txt1" class="show-txt" style="width: 100%;height: 39px;display: block;"><font color="#889AA4">回到顶部</font></span> </a> <a v-on:mouseover="changeActive2($event)" v-on:mouseout="removeActive2($event)" @click="toBottom" style="width: 39px;height: 39px;position: fixed;bottom: 70px;right: 3px;z-index: 999;"> <!-- position: absolute;bottom: 40px; --> <el-image v-show="txt2" src="/static/xygIMG/下拉.png" style="width: 39px;height: 39px;"></el-image> <span v-show="!txt2" class="show-txt2" style="width: 100%;height: 39px;display: block;"><font color="#889AA4">回到底部</font></span> </a>
<script>
import Pagination from ‘@/components/Pagination‘//分页器
export default {
components: {
Pagination
},
data() {
return {
txt1: true, //回到顶部
txt2: true, //回到底部
}
},
methods: { // 鼠标移入加入class changeActive( /* $event */ ) { debugger this.txt1 = false; // this.$event.currentTarget.className="active"; }, removeActive($event) { debugger this.txt1 = true; // $event.currentTarget.className=""; }, // 鼠标移入加入class changeActive2( /* $event */ ) { debugger this.txt2 = false; // this.$event.currentTarget.className="active"; }, removeActive2($event) { debugger this.txt2 = true; // $event.currentTarget.className=""; }, //点击回到页面顶端 backTOP(){ document.body.scrollTop = document.documentElement.scrollTop = 0; }, //点击回到页面底部 toBottom(i) { let clientHeight = document.documentElement.clientHeight || document.body.clientHeight; let scrollHeight = document.documentElement.scrollHeight; let rollheight = scrollHeight - clientHeight; //超出窗口上界的值就是底部的scrolTop的值 document.documentElement.scrollTop += 200; if (document.documentElement.scrollTop + 1 <= rollheight) {//之所以+1,可以打印这两个值的日志就知道了,下面+1也是同理 var c = setTimeout(() => this.toBottom(i), 10);//调用setTimeout是为了“回到底部”这过程不是一瞬间 } else { clearTimeout(c); } }, }
</script>
<style scoped="scoped">
/*
.show-txt {
/* 回到顶部 */
display: none; }
*/
</style>
标签:top active 鼠标 nat play class settime image round
原文地址:https://www.cnblogs.com/xyg34/p/13384275.html