Vue下滚动到页面底部Infiniti加载数据的演示代码

作者:ca88

前言

$('html body').animate({scrollTop: total}, 500);

滚动到页面底部Infiniti加载的效果在Vue上贯彻其实和经常的页面开拓多数, 每回滚动加载未成功的情状下不会触发请求下一回, 每一次请求push到数组内, 通过<img :src="">的数额绑定达成了懒加载(其实0 0我不太认同...), 看完是否感觉挺简单的.

在vue中钩子函数监听菜的色调列表(this.container)的轮转事件,

三、修改锚点状态

 

<template>
 <div id="app">
  <h1>Random User</h1>
  <div class="person" v-for="(person, index) in persons" :key="index">
   <div class="left">
    <img :src="person.picture.large" alt="ca88 1">
   </div>
   <div class="right">
    <p>{{ person.name.first}} {{ person.name.last }}</p>
    <ul>
     <li>
      <strong>Birthday:</strong> {{ formatDate(person.dob)}}
     </li>
     <div class="text-capitalize">
      <strong>Location:</strong> {{ person.location.city}}, {{ person.location.state }}
     </div>
    </ul>
   </div>
  </div>
 </div>
</template>

<style lang="scss">
.person {
 background: #ccc;
 border-radius: 2px;
 width: 20%;
 margin: 0 auto 15px auto;
 padding: 15px;

 img {
  width: 100%;
  height: auto;
  border-radius: 2px;
 }

 p:first-child {
  text-transform: capitalize;
  font-size: 2rem;
  font-weight: 900;
 }

 .text-capitalize {
  text-transform: capitalize;
 }
}
</style>
methods: {
 onScroll () {
    var _this = this;
    _this.itemVal.forEach(function(obj, i){
     _this.scrollTop = _this.container.scrollTop;
     if(_this.scrollTop >= obj.top && _this.scrollTop < (obj.top   obj.height-10)){
      // scrollTop的移动位置要在类别的菜品列表中才显示对应锚点的当前状态
      _this.isActive = obj.index;
     }
    })
   },
}

      Firefox: document.documentElement.scrollTop

ca88 2

# npm install axios moment

一、组件html结构:

而是为了满意一连的供给,必须此外想办法 

后记

从这几个项目中能够变本加厉对Vue的生命周期的敞亮, 何时早先axios请求, 怎样结合Vue使用原生js来写scroll事件等等, 笔者那边最首假使对原来的书文的重中之重提取和增加补充

currentStick(){
     const {dishId} = this.$route.query;
     const cateContent = document.querySelectorAll('.cate-content');
     const _this = this;
     cateContent.forEach(function(v, i){
      if(v.id == dishId){
       _this.scrollTop = v.offsetTop; 
      }
     })
   },

      2. 如何监听页面滚动事件?

而是为了满足延续的需要,必须其它想方法

总结

好了,基本上全部的代码都帖出来了,说的应有也详细吧(小编尽力了),该方法以为其实依然在操作dom成分和js,枉用vue。可是一代也绝非更加好的办法来完毕。

在贯彻平滑滚动此前,得先确定保证基本的锚点作用

// 平滑滚动,时长500ms,每10ms一跳,共50跳
// 获取当前滚动条与窗体顶部的距离
let distance = document.documentElement.scrollTop || document.body.scrollTop
// 计算每一小段的距离
let step = total / 50
(function smoothDown () {
  if (distance < total) {
    distance  = step
  // 移动一小段
    document.body.scrollTop = distance
    document.documentElement.scrollTop = distance
  // 设定每一次跳动的时间间隔为10ms
    setTimeout(smoothDown, 10)
  } else {
  // 限制滚动停止时的距离
    document.body.scrollTop = total
    document.documentElement.scrollTop = total
  }
})()

首先成立多个总结的vue项目

jump(index){
    const cateItem = document.querySelectorAll('.cate-item');
    let total = cateItem[index].offsetTop;
    let distance = this.container.scrollTop // 获取到顶部的距离(this.container便是.cate-list,为了方便存起来了)
    let step = total / 50;
    this.isActive = index; // 菜单列表显示当前样式
    const _this = this;
    if (total > distance) {
     smoothDown()
    } else {
     let newTotal = distance - total
     step = newTotal / 50
     smoothUp()
    }
    function smoothDown () {
     if (distance < total) {
     distance  = step
     _this.scrollTop = distance;
     setTimeout(smoothDown, 10);
     } else {
     _this.scrollTop = total
     }
    }
    function smoothUp () {
     if (distance > total) {
     distance -= step
     _this.scrollTop = distance
     setTimeout(smoothUp, 10)
     } else {
     _this.scrollTop = total
     }
    } 
    }

ca88,因而 offsetTop 获取对象到窗体顶端的相距,然后赋值给 scrollTop,就能够完结锚点的效果

ca88 3

项目搭建完后, 跑起来看看

该效能是参照从前博主的篇章的,方法基本没改什么,简单易懂,间接放代码

      Chrome: document.body.scrollTop

ca88 4

看看一篇Implementing an Infinite Scroll with Vue.js, 感到挺实用的就看了下, 顺便轻巧翻译了弹指间给急需的人葠考.

眼下在做一个vue项指标伙食模块,作者必要贯彻三个菜单列表展现的效能(如图所示:左边为菜单体系,左边展现相对应的菜的品性)

假使每段的时刻丰硕短,频次丰富多,在视觉上就是常规的平缓滚动了

Chrome: document.body.scrollTop

保留好, 回到浏览器, 查看效果, 已经远非难点了~

三、点击菜的色调进入页面,该菜的色调置顶的联合浮动作效果应(该意义实在有隐藏性的bug,我们项目已打消该功能)

要是有 jQuery 完成平滑滚动就特别轻松:

地点只可以算是二个应急之法,而且这种操作 DOM 的措施,并不切合 Vue 的筹划观念

  1. Vue生命周期
  2. axios简单用法
  3. moment.js格式化日期
  4. 图形懒加载
  5. 构成原生js来写scroll事件
  6. 恳请节流

ca88 5

mounted: function () {
 this.$nextTick(function () {
 window.addEventListener('scroll', this.onScroll)
 })
 },
 methods: {
 onScroll () {
 let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
    // 586、1063分别为第二个和第三个锚点对应的距离
 if (scrolled >= 1063) {
 this.steps.active = 2
 } else if (scrolled < 1063 && scrolled >= 586) {
 this.steps.active = 1
 } else {
 this.steps.active = 0
 }
 }
 }

如若未有别的供给,直接用 <a href="#id"> 是最简便易行残暴的方法

然后安装项目所急需用的有个别插件

该意义用:scrollTop绑定的话便轻易了无数,在此以前用document.body.scrollTop 设置值一向未曾效劳。

借使未有此外要求,直接用<a href="#id" rel="external nofollow" >是最简便残酷的法子

 

接下去来写模板结商谈体制, 如下:

基于vue监听滚动事件,达成锚点链接平滑滚动

ca88 6

 

这里原来的文章者也特地提示, 完全没供给也不建议在加载页面的时候请求5次, 只是以此接口一次只好回去1条数据, 仅用于测试才这么做的. 当然作者这边也得以通过Mock来效仿数据, 就不详细说了~

结构布局很简短,在此多实属想给大家讲述清楚一点儿右侧菜的色调的协会,方便绑定:scrollTop属性,笔者就踩了那么些坑...

如上正是那篇小说的全部内容了,希望本文的从头到尾的经过对我们的上学可能干活能推动一定的援助,如若有疑难大家能够留言交换,多谢大家对台本之家的支撑。

假倘若思想项目,这么些效应就特别轻便。可是放到 Vue 中,就有两患难点:

<script>
import axios from 'axios'
import moment from 'moment'
export default {
 name: 'app',
 // 创建一个存放用户数据的数组
 data() {
  return {
   persons: []
  }
 },
 methods: {
  // axios请求接口获取数据
  getInitialUsers() {
   for (var i = 0; i < 5; i  ) {
    axios.get(`https://randomuser.me/api/`).then(response => {
     this.persons.push(response.data.results[0])
    })
   }
  },
  formatDate(date) {
   if (date) {
    return moment(String(date)).format('MM/DD/YYYY')
   }
  },
 beforeMount() {
  // 在页面挂载前就发起请求
  this.getInitialUsers()
 }
}
</script>

在初写项目标品味进度中,作者一贯改动的是document.body.scrollTop的值来兑现滚动,可是后来逐级发现很邪门,一时给其赋值并未有成效,而且经过也很麻烦,又查看了一些材质也未有消除办法,所以不得已屏弃。

本文由ca88发布,转载请注明来源

关键词: ca88网址 Vue 组件 锚点 滚动事件