00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们对选项卡做了一个数据绑定,是这样的选项卡数据绑定。那我们现在呢,选卡数据已经有了,但是我们想往上拉的时候,拉到的底端的时候,我们需要加载下一页的数据,因为在手机里边肯定不是需要点击分页才能加载数据的,对吧?所以呢,通过滑动我们去加载数据,滑动的底部的时候加载。另外呢,那如果我们自己写是比较麻烦的,那我们得需要借助于第三方的一个插件来帮我们完成这种滚动的效果,当前这个滚动条呢,是属于PC端的,你看啊,滚动到顶部他也没有不像我们你刷起微信的时候,你往下一拉,下拉下载数据对吧,是这样,然后呢,我们滚动的时候,鼠标一离开,它还要继续飞一会儿,继续滚动一会儿,对不对,有个缓冲,这个呢,它也不带缓冲,你看一滚动。他没有什么变化。就是没有什么变化,所以呢,我们要想需要。更好的体验这种移动端的感觉,我们就需要用插件,现在插件呢有很多种。我们最常用的是用什么bit这种插件,我们搜一下在get里边啊,搜一下叫呃,Bet c。
01:09
就是这种。这个呢,呃,我们大家下载用NPM安装就可以了,你看我们用NTM安装下载一下,这个先把它下载下来啊,加大S肯定是在。呃,运行时候依赖对不对,那我们NPM安装一下因到be,嗯SC装这个加上大S或者杠杠C都是一样的,我们先呢安装着我们继续看我们的文档。嗯,这里边有中文文档。点击一下。安装对吧,它是什么,你看啊,它是一款重点解决移动端。现在也支持PC这个版本对不对?各种滚动场景需要的插件,核心借鉴是ICO,那这个也是一个组件对吧,它是这个的升级版的核心借鉴它它的API的设计呢,兼容这个对吧,又在它基础上扩展了一些性能以及优化。
02:03
这里边儿演示地址二维码。加载出来,我们回过来看一下这个。呃,后续看一下这个文档。看英文文档吧,开始。你看我们使用的时候,它一定是需要有一个外层的一个标签,然后要内层的去滚动,外层的是一个固定的一个区域,然后底层是一个很长的比外层是100的一个区域,那底层呢,那我们就可以比如说是五百一千一万对不对,他们才能在外层里边去滚动,所以呢,需要这么两层,然后用的时候呢。啊,就像类似于这样,上面是外,你看一外层,里边是内容区域,这样可以滚动,所以我们设置的时候呢,需要设置两个容器,绿色部分是包装纸,也成为副容器,高度是固定的,黄色部分呢,它是副容器的第一个子元素,高度呢可以随内容大小而增加。看到了吗?这里边儿有几个方法,嗯。
03:02
我们得找到它的几个方法,引入的时候呢,我们先通过这个道的元素,你看查询这个类,然后找到这个外创建的时候呢,是使用外层的容器,我们就可以把它创建出来,然后这里边需要有几个核心的核心的功能。嗯,拆分,那我这里边还需要一个这个。那需要安装两个吗?看一下应该不用装一个。就可以。装一个就可以了,他说有一些核心的方法,他需要装一个,咱先不用管,那咱们先把这个外层的这个先拿到,先创建,然后咱们再找一些其他里边有用的一个方法。那你看一下,我们就得先做一个外层的容器给它包装起来,对不对,然后我们需要再需要去创建,所以呢,我们在这里边。我们看哪块需要滚动,这个标题栏不需要滚动,对不对,那整个的这个班截图和下边都需要滚动,那我们就在这块包装一层div。把我们所有的这个内容产品列表内容所有的这些放到这个里边去,那在这里边呢,我们起一个呃类名class,我们叫做呃外WRA,一个这样的一个容器,然后呢,它是固定高度的,然后里边高度是可以变化,里边需要内容,那里边我们我们再包裹一层。
04:18
再包裹一层,然后我们起一个类class。叫con TNT,当然这它只是让你有个外层和内容,内容的高度可以很高,外层高度是固定,需要一个这样的一个情况才可以。其他的呢,咱们就不需要了,那我们现在需要给外层的高度,我们给上,呃,给上一个固定的一个高度就可以了。这块你再加这块加上一个加上一个样式wappr这块。给让它嗯,固定的高度,让它占领占领整个屏幕的一个高度,那我们就将它拉伸就行了,比如说呃,位置。位置呢,我们是绝对的。绝对位置,那里边设置绝对位置,上面肯定就设置成相对的位置,我们看上层上层有没有,上层正好我们几个ID home。
05:07
HO。嗯,就起一个后的名,得有一个最外层嘛,对不对,不然的话相对位置它是不好使的嘛,然后我们井号。Home。就是最外层的这样的一个情况,然后呢,高度。然后最外层的。高度是。100,嗯,V就是占领整个的屏幕的区域高度,然后位置是相对的。位置是相对的,那里层我们就可以用绝对的位置,绝对的位置我们让它是。嗯,全部拉伸。也就是呃,顶部,当然顶部有45那个标题栏,咱们没让它滚动,所以顶部呢,咱们就让它是45这样的一个像素,然后底部。嗯,BOT Tom底部呢,有一个菜单栏,咱们是50个像素对不对,那也让他这块。这样的话,它的高度就是顶部和底部,有这样的位置,它就拉伸占领整个的区域,整个的区域,然后左部是零,然后顶部右也是零,让它。
06:03
里边呢,这样的话,它内容它就会怎么大居中。然后呢,超出部分。超出部分我们隐藏对吧,然后BK加背景颜色ID,我们看一下做一个红色的背景。拿过来。刷新一下。这服务器我们这块。帮他安装没有运行服务器啊,把服务器运行起来。把外层内容和里层内容这些东西我们都写完就行了。红色部分。红色部分就这些,当然里边现在我们加上了固定高度,对不对,它现在就滚动不了了,你看固定高度它就滚动不了了,背景是红色的这个部分嘛,已经是固定高度了,然后里边呢,内容区域。内容区域我们就根据内容实际的情况去做就行,所以呢,咱这块先不用去做里边内容区域。先不用去做里边扭需啊跑到。现在是滚动不了的,对不对,那滚动不了没关系,我们需要用到什么,用到我们现在这个插件,这个组件,所以我们想用到这个组件,我们必须得引入这个组件,重新设置这个滚动的这个方式。
07:11
找到我们的文档看一下。这里边儿。呃,需要。引入。需要。这个引入进来。按照文章引入进来,这太长了,Better,你就叫一个b room对吧,简单一点,这样的话我们用起来就非常的方便,少写几个字符而已啊,少几个字符,少写几个是几个,咱们先那样它短一些。那引这块需要我们引入这个。呃,引入这个之后,我们需要创建他的对象。创建对象我们看一下。需要谬一个这个去创建对象,然后呢,包裹外层的倒母元素,找到外层的倒元素,你看外层的倒元素可以有这么几个方式,可以get document get element by ID的方式对不对。
08:05
起一个这个咱们这边是应该是类对吧。外层元素,咱们这块用的是内。这个它需要通过这个找到这个倒元素才能创你对象,咱有几个方法,通过类,通过ID,也可以通过ref,对吧,我们起一个名字,当然后期我再给你用ref,这里边咱们就先让它跟手串使用一致的这样的方式啊。然后呢,它既然通过道母元素来创建,你想想我们如果直接在set纳up里边使用,我觉得应该不可以,因为这里边在执行setup的时候,道母元素还没创建完成呢,对不对?所以呢,我们最好在哪里,我们最好在这个里边,也就是almost not执行这个方法的时候,是DOM元素已经挂载成功了,所以就能找到我们的DOM元素了。就能找到我们盗墓元素,所以在这个里边我们去写,呃,还是比较比较合适的。所以需要在这里边创建什么?呃,Bet c这个对象。需要创建这个对象,在这里边创建啊,那就是呃,声明一个。
09:04
B。S加O这样的一个变量吧。呃,At这么一个这样的一个变量,然后等于E一个。咱们自己,呃,声明包含的名叫BSCRO这样的一个名称,也就是我们在引入的时候,我们引入的相当于这个过渡方法,对不对,引入的这个过的方法,我们直接用它就可以创建对象,创建对象。然后里边必须加载一个倒元素,那我直接写类,这个肯定是不行的,那我们用呃,Document用。尽量这里边不用倒啊。但是他手册有要求,就这么用的QE查询选择器,Select选择器,我们用什么选择器呢?根据选择器我们去查找我们用什么WIP。通过这个类这个点别忘写啊,通过这类,因为我们选择器嘛,选择器的类名不就是这个吗。这样的话,我们就能获取到最外层的这个元素。不觉的这个。然后回头这个,这个是第一个参数,当然我们还有第二个参数。
10:02
那第二参数,第三个参数我们就得需要怎么的找手势了,看一下你参数都需要哪些。都需要哪些?介绍的。不全。在百度里边查一下吧。百度一下。Be-C这个。嗯,这是讲解博客,咱们随便找一个个人写的一个。文章啊。写的文章。嗯,Vuee,它Vue里边使用。你有说明吗?到我们的一个对象安装。找一个。
11:07
这个啊,这个详解看上去。比较全一些。滚动的原理。然后第一个加上这个插件负容器固定高度的部分。第二个这里边加上。呃,滚动。帧,然后它既然加滚动的里边的点击事件就不要点击了,所以呢,你加上这个是否允许点击就可以了。然后还有几个方法属性在这里边,你看一下啊。就是这个,呃,类型这块。可以指定。类型R类型为一的时候是非实时的,也就是屏幕超过一定时间后,对吧。然后这个派发这个滚动事件二的时候,滚动到结尾。这个方法。刷新的方法等等。嗯,加拉这几个。
12:02
不如咱们直接直接用呢,我想写几个写几个吧。咱几个写几个,他那手势看着也也比较累啊。其实在这个也比较简单,不是那么难的一个东西啊,加上这个,那我们创建创建那个办对象,它需要第二个。第二个参数,第二个参数呢,就是初始化它的一些配置设置,你比如说嗯,刚才咱们看到那个有一个在这里边有几个类型。嗯,就是比它是可以是123。可以使用指定这几个类型啊,指定这个属性也就在这块。这个也是经常用的属性pro。指定这个类型可以是0123,那比如说指定三的时候,咱们看一下是什么意思。你看当属性为三的时候,不仅在屏幕滑动过程中,也就是你滑动时候离开的时候,它还会自动滚动一会儿,对不对,还有滚动的动画的运行,所以在运行过程中对不对,是否触发这个滚动的事件。那如果为二的时候呢,在屏幕滚动过程中触发滚动的事件,那也就是说你鼠标只要一停,它还有一个缓冲在滚动,那个时候呢,就不触发一的时候呢,会实时触发。
13:09
对吧,这么几个一般的呢,我们这块用三对不对,不仅在滚动过程中,只要它运动,咱们就让它触发一个滚动事件,一会儿我就给大家加上几分钟事件。然后这个click有一个点击在这里边,咱们经常用到的,这里边干嘛呢。这里边看边上有这么几个值,0123,那比如说三就是。只要在运动。运动。就。处罚。就触发S事件。一会咱们会调用这个时间啊,然后这个点击的时候默认的话,里边如果在滚动区域括起来,里边如果有链接什么的,它是不生效的,对不对,如果你想要里边的滚动区域里边链接可以点击对吧,这块咱一定要加上,因为咱们点击的商品的时候,还要调到商品详情的,所以这块呢是是否。允许。
14:01
允许等着点击。是否允许点击,还有一个就是是否那个下拉。加载更多一定要设置默认是假默认的,不允许你下拉加载更多。有一个属性下拉加载动作。这个。嗯,这个up,嗯,Upload和一个up down就是定一个事件啊,它有一个属性,属性是应该是upload,它这里边没有记,所以呢,咱一定在这块里标记一下,就是有一个什么pull up上拉加载。我们提示了就这个,然后默认是假,我们也给上真值,也就是。啊,上拉。嗯,加载。加载更多。加载更多。默认是什么是甲?温是加,那我们当我们加上这个属性,那就创建这个对象,加上这个属性,那我们现在就可以让页面去滚动了吗。你想想我们已经加上这个了,对不对,加上这个,如果我们想监听它的滚动的世界,我们想知道它的滚动,那我们需要在这里边去。
15:09
你比如说。这块是是否触发这个滚动事件,我们把这几个值改一下啊。这里边儿,呃,加上使用。处罚处罚。滚动。动世界这里边儿自带一个BA给这个对象。然后绑定一个它的事件,有一个叫做滚动事件SC,这是它里边自带的滚动事件,我们加上这个绑定的事件才可以,然后绑定的时候,我们需要传一个当事滚动事件触发了。我们需要调一个回电函数,然后回调函数这里边儿需要传递的就是什么,就是我们滚动的这个位置。POI这个位置你看。我们打一下这个位置,这个位置里边有X位置和Y的位置,那我们比如说滚动X位置,它不滚动,那我们就直接滚动Y的位置,看一下是不是能出发。
16:02
你这个对象。那我们这个对象真的就是可以滚动的了,你刷新一下。啊。现在滚动,你看上边这种时间是不是就跟原来不一样了,对吧。就不一样了,那我们看一下有没有这普通位置,你看。那个位置它滚动时,它有个弹性,它就回来了,对不对,当然了,这是跟什么,现在因为我们还没写完。是这样的,我们还没有加载更多的一个一个数据。滚动条变成这样了,你的鼠标一离开,它会有一点弹性,还会在滚动,还在滚动,下边还在动,看到了吧,那如果比如说改成二的话。把这块改成。二的话。刷新一下。抓一下,我们现在动一下。得离开。没,没太多效果,是不是属性写错了pro?Pro。飘。没提示,那我退回来吧。
17:01
啊,改成三吧,就是你鼠标再滚动,因为咱们这数据毕竟比较短啊,加载更长的就可以了,那他想滚动这个数据,它现在你看默认的高度,它现在很矮,滚动不了对吧,现在就这么高,你看。默认只能滚到这900多,你看你怎么滚动它都是900多,你看我鼠标一离开。大会运动一会儿。对吧。而且呢,下边这个上面这个条它已经失效了,对不对。这是股东这个位置。看到这个了吗?这边是监听这个滚动位置滚动了多少,我们知道这个滚动的位置,通过这个位置呢,我们可以做一系列我们想处理的这样的一个事情。都可以啊,处理这个事情,那现在咱们暂时不做这个,这个放在这块,那我们还需要什么呢?当我们高度有变化。前面我们处罚的时候不好使,对不对,高度有变化,你一定得处罚他的一个什么,一个方法是非常重要的。也就是如果我们想它这个高度变化刷新,我们就得触发它的里边的刷新的一个方法就是重新计算这个内容区域的高度。
18:08
重新计算内容区域的高度。这里面。比如说我们新加内容的时候,新加内容的时候。块,你看我们在加拉下载更多加载很多内容的时候,高度肯定会新加进来,那得需要重新计算这个高度,那现在我们可以打印一下这个高度,看一下高度是多少,比如说我们呃在哪打印比较。比较合适嘛,嗯,下拉加载更多的时候,里边我们可以打印这个。打印这个数据和这个页数。滚动的时候呢,我们也可以打印这个。这个高度。嗯,但是在这块。但是滚动的时候,每次打印的时候比较多,我先不在这打印了,一会儿给你看一下,说明你必须调用一个方法,就是这里边的BA。嗯,BSC这里边的一个什么方法呢?里边叫做re,这个方法是我们经常需要调用,只要是你页面有变化,我们就需要调用一下它,你比如说加载完数据能变化,重新把高度计算一下,不然的话高度不计算,它没有高度它就不会去设置滚动,这这方法是很重要的,那这个方法我们在哪调用比较合适呢?
19:19
你看这个方法。我们不在这。只要页面有变化就得。加这个,那我们把这个变量。放到外边去。嗯,CTRL复制一下。把这个变量我们声明到外边,生明在这个外边,这样的话我们在setup其他的位置,就不是说非得在almost里边,这个生命周期里可以用了,我想在其他地方也可以用,那我们就把它加到外边去。然后呢,它是一个对象,那我们得用AQ声明一下,默认值是一个空对象。证明一下默认值是一个空对象,然后里边我们在用的时候呢,就可以把它。加载进来了对吧。
20:00
压下来了,然后。嗯,我们在任何地方,比如说在这个地方,我们加一个,你看什么时候页面有变化,只要是页面有变化,是不是就会触发我们前面学过的一个监听啊,对不对,所以呢,我们需要加上这个监听,加上监听呢。需要在这个里边把我们监听的方法也加进来。如果页面咱们不监听某一个数据,监听所有的数据,就用这个就可以啊watch WAT这个监听我记得前面也重点讲过一节课,对吧,咱们用这个监听,只要页面上不管哪个数据变化,他都会触发它,那我们在这里边去写。那就是在页面里面。在页面里边我们加上。这块是监听。监听。就这监听吧。监听任何。因为咱需要请求数据对不对,请求数据就得在页面加载,所以数据有变化。任何一个变量对吧,有变化就会触发。然后我们写上wa。WAT watch这个里边加上一个回调方法,只要数据有变化就可触发它。
21:05
那是处罚他数据有变化,数据有变化还得渲染页面呢,把数据挂上去对不对?所以他需要延迟一会执行,还记得咱前面学过一个方法。就是当盗墓渲染完再去执行的一个方法,叫做什么,这个经常用到的。Master TK这个方法。所以呢,我们相当于你不能说数据一变化你就刷新,而什么时候刷新呢?当我们数据变化,页面也更新,道路元素都更新完了,是不是得要重新计算高度,然后要滚动事件才能再继续耗时,所以在这里边需要加一个回调方法。它相当于是延迟执行了重新计算高度这块需要重新计算。高度。重新计算高度,在这里边才需要重新计算高度,那我们先判断什么呢?如果直接调用这个BA,它里边有一个叫做什么re。RE。Re。
22:01
Fish重新计算高度的一个方法,但是呢,我们在外边调用的时候页面有变化,我们这个是在哪里边去做的,是在almost里边去创建的这个对象,这个对象有可能还没空的不存在呢。虽然前面我们。我们声明了,所以呢,我们先判断什么,先判断一下BSSCR。Col它存不存在,如果存在我们用短路去设置,如果存在的话我们去调用,不存在我们就不调用啊,不然的话就给你报错对吧,因为我们毕竟是异步的。去处理这个东西,虽然这块延迟执行,但有可能这块也不存在,所以这样写防范好一些。好一些,那这样的话,我们有滚动就会触发这个事件,这样呢,我们计算高度的,那我们如果想做什么下拉。嗯,这样的话,我们只要页面有变化,那肯定现在是计算高度,这是没问题的,对吧,那我们还得需要下拉视频就拉到底儿了,需要加载数据对吧。比如说这块触发一个事件,它也是用事件做的下拉。应该什么上了对不对。上拉加载。
23:00
数据。他会触发一个事件,当拉到底的时候,他就开始触发了,就是。浦发。触发一个事件,这个事件叫做PU,呃。Poll上岸。嗯,L动作的啊,这个方法,所以呢,我们这块加一个BS。加事件,这个事件都会在你发生的时候再出发,对不对。发生的时候触发触发什么事件呢?就是咱们这个puling up。刷新方法当当我们发生变化的时候,必须调用。以保证滚动正常的方法重新计算高度啊,这得有。然后。上拉加载更多。就这个对吧,这是下拉加载更多,这上拉加载更多,因为你鼠标是往上去滑动的时候,所以就是上拉对不对,向上滑动的时候滑动顶端加载数据,如果是你往下拉对吧,滑动的顶端的时候加载数据,你可以通过这种方式。
24:04
监听不同的事件,那这个事件发生的时候,我们会触发一个。一段函数在这里边,那这里边儿我们。加一个这个。就是先打印一下这里边儿,比如说是上拉。加载更多加载。更多。连着点,这只是随便打印一下,就看一下我们这世界能不能触发上。找到我们这个方法,我们刷新一下。你看。往上滚动滚动。当滚动到底的时候。这个滚动的那个。东西太多了,把这个去掉。小心一下。你看上了下载更多对不对。因为拉动这一次,它就不会有其他的数据了,已经到底了,对不对,就不会再有这个。
25:03
加加加载工多就可以实现调用的这个方法,当然了,我们等页面一进来的时候,我们就先重新计算一下它高度,不然的话它的呃位置。这块总会是,呃,有问题可以进来。是吧,就计算一下高度,当你基本默认它就有一个高度啊,那你看下拉干工作的时候,正好我们就打印一下这个高度。在这个呃,位置里边。打一下这个高度。看一下我们打印这个高度,怎么去打印比较合适一些。嗯。这个高度。这边我们得先获取到这个对象。来,我们这边先获取一下这个对象内容的对象,我们还是使用这个document里边的Q,嗯,通过选择器。选择器,我们有一个叫内容con TNT,因为这个内容的高度它会是变化的,对不对,第二呃C客户端的高度。
26:05
然后我们打印一下。感受这个高度啊,这样的话我们刷新你刷新一下。375。在内高度它还没有重新计算,那我们加载完这个。自动加载完这块,我们再加一个。每次让他重新计算一下这个高位。也就是我们在这块创建完这个数据,加载完异步数据。就这会吧。他会执行一下。执行完会先计算一下这个高度。的方法,可以是多个地方去使用啊。好像。这会加力高度的时候,我们。直接增加,当我们元素处理完,我们最好是使用延迟加载一下。让他先执行了,后边的还没有执行。放在这里边,通过这个去处理一下。
27:00
刷新一下。他还是有点。还是有点这个。刷新一下。375那塞拉加的是可以的。没处罚上吗?我们试一下这块板板一下,嗯。加一行井号。这块打印了。再加一个。再延迟一下吧。每次执行的时候都还怎样延迟一下?
28:01
375。在time这方面写时间。加上就是一秒钟。还不如刚才不加这个,不加这个好用,加这个就不好用。把这个去掉去掉,那我每次下拉的时候不下拉下载更多吗?在这里边只要我拉动的时候,手动触发的时候,我就让他重新计算一下,所以在这个位置我们加一下,我觉得更合适一些,对吧,我们出发的时候在这里边去加。那就这里边儿,因为这里边直接能用到这个对象了,所以我们直接是bs pro直接调用它里边的。嗯。这个方法ref。R。一下。注意一下。现在就可以了,对吧。帮他们做一个卡顿,因为有拉动,它就会重新计算一下这个高度。
29:04
现在就不会出现刚才的。那个问题。所以在这里边也要重新刷新一下,计算一下这个高度,不然的高度就是300多,所以呢不太好办,这样的话我们就可以去处理了,那下一步呢,我们就需要在这里边我们去加载数据,并将数据渲染的页面,然后重新计算高度,我们就可以做完,做完下拉加载更多了。好,谢谢大家,谢谢。
我来说两句