zoukankan      html  css  js  c++  java
  • Vue+elementUI 创建“回到顶部”组件

    1、创建“回到顶部”组件

      1 <template>
      2     <transition name="el-fade-in">
      3             <div class="page-up" @click="scrollToTop" v-show="toTopShow">
      4                 <i class="el-icon-caret-top"></i>
      5             </div>
      6         </transition>
      7 </template>
      8 
      9 <script>
     10     export default {
     11         name: "app-to-top",
     12         data(){
     13             return{
     14                 toTopShow:false,
     15             }
     16         },
     17         methods:{
     18             handleScroll() {
     19             /* 获取回到顶部的位置元素 .content-container-top */
     20                 let dom =document.getElementsByClassName('content-container-top')[0];
     21                 this.scrollTop = dom.scrollTop;
     22                 if (this.scrollTop > 300) {
     23                     this.toTopShow = true;
     24                 }else {
     25                     this.toTopShow = false;
     26                 }
     27             },
     28             scrollToTop() {
     29                 let timer = null;
     30                 let _this = this;
     31                 cancelAnimationFrame(timer);
     32                 timer = requestAnimationFrame(function fn() {
     33                     if (_this.scrollTop > 5000) {
     34                         _this.scrollTop -= 1000;
     35                         document.getElementsByClassName("content-container")[0].scrollTop =
     36                             _this.scrollTop;
     37                         timer = requestAnimationFrame(fn);
     38                     } else if (_this.scrollTop > 1000 && _this.scrollTop <= 5000) {
     39                         _this.scrollTop -= 500;
     40                         document.getElementsByClassName("content-container")[0].scrollTop =
     41                             _this.scrollTop;
     42                         timer = requestAnimationFrame(fn);
     43                     } else if (_this.scrollTop > 200 && _this.scrollTop <= 1000) {
     44                         _this.scrollTop -= 100;
     45                         document.getElementsByClassName("content-container")[0].scrollTop =
     46                             _this.scrollTop;
     47                         timer = requestAnimationFrame(fn);
     48                     } else if (_this.scrollTop > 50 && _this.scrollTop <= 200) {
     49                         _this.scrollTop -= 10;
     50                         document.getElementsByClassName("content-container")[0].scrollTop =
     51                             _this.scrollTop;
     52                         timer = requestAnimationFrame(fn);
     53                     } else if (_this.scrollTop > 0 && _this.scrollTop <= 50) {
     54                         _this.scrollTop -= 5;
     55                         document.getElementsByClassName("content-container")[0].scrollTop =
     56                             _this.scrollTop;
     57                         timer = requestAnimationFrame(fn);
     58                     } else {
     59                         cancelAnimationFrame(timer);
     60                         _this.toTopShow = false;
     61                     }
     62                 });
     63             }
     64         },
     65         mounted() {
     66             this.$nextTick(function () {
     67                 window.addEventListener('scroll', this.handleScroll,true);// 取消事件冒泡,防止绑定失败
     68             });
     69         },
     70         destroyed() {
     71             window.removeEventListener('scroll', this.handleScroll,true);// 取消事件冒泡
     72         }
     73     }
     74 </script>
     75 
     76 <style scoped>
     77     .page-up{
     78         background-color: #409eff;
     79         position: fixed;
     80         right: 50px;
     81         bottom: 30px;
     82          40px;
     83         height: 40px;
     84         border-radius: 20px;
     85         cursor: pointer;
     86         transition: .3s;
     87         box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
     88         opacity: .5;
     89         z-index: 100;
     90     }
     91     .el-icon-caret-top{
     92         color: #fff;
     93         display: block;
     94         line-height: 40px;
     95         text-align: center;
     96         font-size: 18px;
     97     }
     98     p{
     99         display: none;
    100         text-align: center;
    101         color: #fff;
    102     }
    103     .page-up:hover{
    104          opacity: 1;
    105      }
    106 </style>
    107     

    2、调用“回到顶部”组件

     1 <template>
     2     <div class="content-container-top">
     3         <ScrollTop> </ScrollTop>
     4     </div>
     5 </template>
     6 
     7 <script>
     8     import ScrollTop from '../components/public/AppToTop.vue'
     9     export default {
    10         name: "app-list",
    11         components:{
    12             ScrollTop
    13         }
    14         
    15     }
    16 </script>
  • 相关阅读:
    vue 2 渲染过程 & 函数调用栈
    vue keep-alive的实现原理和缓存策略
    记 vue 表单的一个性能问题
    IIS 部署到服务器上出现数据库连接失败
    JS apply和call
    js 检查对象是否没有字段
    c# httpclient
    js 使用flow
    IIS 出现405
    站点js屏蔽他人广告
  • 原文地址:https://www.cnblogs.com/zhaoxiaoying/p/10208070.html
Copyright © 2011-2022 走看看