码迷,mamicode.com
首页 > 其他好文 > 详细

回到顶部|回到底部功能的实现(Vue)

时间:2020-07-27 13:49:30      阅读:79      评论:0      收藏:0      [点我收藏+]

标签: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>

 

回到顶部|回到底部功能的实现(Vue)

标签:top   active   鼠标   nat   play   class   settime   image   round   

原文地址:https://www.cnblogs.com/xyg34/p/13384275.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!