阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      vue-lazyload 教程

      vue-lazyload

      用于在应用程序中延迟加载图像。该项目的一些目标值得注意:

      • 轻巧,功能强大且易于使用
      • 处理任何图像类型
      • 加载图像时添加加载类
      • 同时支持 Vue 1.0 和 Vue 2.0

      简单的图片懒加载就实现

      html:

      <template>
          <div class="loadingImg">
              /*ondragstart="return false" 图片禁止拖动*/
              <img v-lazy="img"alt="" v-for="img in list" ondragstart="return false">
              <div class="gototop" @click="BackToTop">
                  <a>回到<br>顶部</a>
              </div>
          </div>
      </template>
      

      js:

      <script>
          export default{
              data(){
                  return{
                      list:[
                          "/static/img/2.jpg",
                          "/static/img/3.jpg",
                          "/static/img/4.jpg",
                          "/static/img/5.jpg",
                          "/static/img/6.jpg",
                          "/static/img/7.jpg",
                          "/static/img/8.jpg",
                          "/static/img/9.jpg",
                          "/static/img/10.jpg",
                          "/static/img/11.jpg"
                      ]
                  }
              },
              methods:{
                  BackToTop(){
                      $('html,body').animate({ scrollTop: 0 }, 700);
                  },
                  handleScroll () {
                      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                      console.log(scrollTop)
                      if(scrollTop >100){
                          $(".gototop").fadeIn(500);
                      }
                  },
      
              },
              mounted(){
                 window.addEventListener('scroll', this.handleScroll)
                  $(".gototop").hide();
              },
              created(){
      
              }
          }
      </script>
      

      css:

      img[lazy=loading]{
      
      }
      img[lazy=loaded]{
        animation:fade 0.5s;
      }
      img{
        transition:all 0.5s;
        display: block;
        width: 400px;
        margin: 0 auto;
      }
      
      @keyframes fade {
        0%{
          opacity: 0;
        }
        100%{
          opacity: 1;
        }
      }
      .gototop{
          width: 40px;
          height: 40px;
          border-radius: 5px;
          border: 1px solid #ccc;
          background: #f2f2f5;
          position: fixed;
          right: 30px;
          bottom: 50px;
          font-size: 12px;
          cursor: pointer;
      }
      .gototop a{
          color: #666;
          line-height: 20px;
          display: inline-block;
      }
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录