00:00
大家好,我是学习园地的特约讲师高国峰,上节课我们做完了商品列表,数据呢是从接口里边请求过来的,那我们可以通过点击分类,我们来加载数据,那我们也可以通过什么我们也可以通过。导航的菜单,这种排序菜单,我们去切换我们想要的一个商品,那这节课我们再来看一下,那默认我们加载的数据是当前第一页的,那我们通过下拉可以加载更多的数据,所以呢,我们这节课完成这个功能,这个功能呢,我们在首页上是做过的,首页里边我们通过下拉是可以加载更多数据的。是这样,那我们可以用同样的原理来做,使用C这样的一个组件就可以了,我们先看一下首页里边我们用到的这个组件。应该是插件用到了,这个我们点开,那我们用这个插件之前呢,我们一定先要把它引入这个插件在我们这里边,因为我们已经写过了,所以呢,这里边我就不去细讲里边的每一个方法究竟是做什么的啊,那这个分类参数我们现在暂时用上,我们在这里边引入我们需要的。
01:00
啊,环境这个,然后我们必须创建我们需要的对象。也就是在我们这个里边创建对象,创建呃,Best这样的一个对象在这。我们也把这个方法复制过来,放到我们的这个里边,但是一定要放在哪块amount里边才可以,为什么一定要放在这儿呢?因为我们这里边儿需要使用最外层的那个容器,外层的容器,那外层容器,我们这块找到这个外层容器。用的是哪个呢。我们找一下。是good,这个是我们外层的容器有一个固定的高度,然后呢,里边的内容的长度会很长,通过下拉的时候会加载,所以呢,这个一定要加过来。如果你把它放在这个生命周期want生命周期之外的话,那我们一开始执行的时候是找不到的。对吧,所以我们在这块把这个放在这块来,这样的话我们就可以找到了,然后通过指定pro tap这样的类型就可以在触摸滚动的时候,对吧,不光是手呃,在屏幕上滚动的时候,当鼠标离开它还要有一个运动的轨迹的时候,它也会执行,然后里边包裹的所有的元素是允许他点链接的,然后呢,可以让他上下拉加载更多这样的一个功能。
02:17
啊,加上一个这样的功能,那么我们就可以让我们这个容器发生变化了。看一下我们刷新一下。这里面有一个错误。我们看一下这里边儿,呃,这个是没有定义。因为我们前边这块是没有声明,对不对,那我们先声明一下,也就是在我们这个位置,他在外边先声明了一个这个方法。在这声明了,所以呢,我们需要在这块先声明再使用。找到我们的这个位置,在它的上面先声明再使用,然后我们也需要把所有的声明的都需要把它里回去。这样就可以了。来,我们看一下它的滚动是否已经改变。
03:03
啊,面具没有出现错误,这样的话,我们现在就可以怎么样就可以滚动了,你看有这种弹性的效果了,但是呢,我们现在还不能滚动加载数据,对吧?因为我们还没有做其他的,所以我们需要给它加载事件,加载事件在哪做都可以,因为事件呢是当我们触发的时候才执行,所以呢,只要他绑定一个事件就可以,那我们可以绑定两个事件,一个是哦,都是通过绑定一个滚动的事件,也可以绑定一个什么,绑定一个下拉加载更多的事件,那我们在这里边找到这个下拉加载更多的事件。那个加一个方法。我们把这个整体都复制过来。放到我们这里边下拉加载更多。当然这里边儿这些方法我们就不需要去做了,把这些去掉。嗯,一直到这个位置。这个留着。把这个位置我们需要重新去过去,那当我们呃滚动屏幕的时候,就会触发这个方法,触发这个方法就会在这个里边去加载数据,然后重新把数据加载到页面上,然后别忘了刷新,那刷新这个我们还要去处理。
04:08
因为页面你不重新,只要是内容改变了,一定要重新计算高度,如果不重新计算高度的话,那么我们页面就会出问题。对吧,它就滚动不了,所以呢,我们这个监听加一下。在我们的这个里边随便找一个位置,你们就在最下面吧,加上这个监听,只要页面有数据变化,就会调用这个刷新,重新计算一下高度,那不光是在这块调用,那加这个方法,我们前面一定要引入这个方法啊,在啊,他把我们已经自动引入了,加上这个方法,这两个方法都会给我们自动引入,这个是我们web stop帮我们干的工作,但是你要不放心,可以手动的引入一下,那不光是在那个地方刷新,我们还得需要当我们切换窗口的时候。切换窗口。也就是在。嗯,这个地方切换分类的时候,我们也需要数据加载完毕,当然最好是在这个地方啊,当我们数据重新获取一下数据之后,我们重新计算一下这个高度。
05:05
重新计算高度,那所有的执行这个我们其实都可以放到这个方法里边去,让它完成重新计算高度,让它有一个延迟。延迟的一个效果。放在这里,这样的话,我们在不管是切换这个选项卡,开幕标签,还是我们拉动滚动条,它都有一个延迟,重新计算高度这样的一个情况,如果你不写重新计算高度,那么它就是默认的高度,所以你是滑动不了菜单的,那现在我们需要加载数据在这里边写在我们。这个里面获去就可以了。啊。在我们的。找一下我们的位置。嗯,这个位置获取数据就行了,当然你打印的这些数据你都可以去掉,打印的数据都可以去掉。当前的类型这块我们没有这个,也就是。当前的类型我们是O排序这个,打印一个这个,然后我们有这个反应高度,不然的话它页面容易出错在这里边。
06:03
我们首先呢,得把这个分页计算这个拿过来,比如说GT计算这个分页配置,等于在goods里边把它当前的。嗯。当前类型里边的这个值拿过来,然后配置把它分页拿过来,默认是一,那我们现在想加载第二页,那我们再加个一,对不对,每次都把当前页拿过来,也就是加一取下一页。是这个意思,那取下一页,那我们就需要通过这个方法。通过这个呃方法你在这块拿过来。拿过来这个方法。在这里边我们取下一页,那一定是用当前的这个排序的类型,然后呢,ID是当前的这个ID对吧,拿过来,然后获取数据。这两个,呃,咱们偷懒用这个在这里边我们就不用刷新了,因为我们在这个位置。重新计算高度做了一下,我们把这块放在这块执行,当然最好放在这个里边加载数据,这是没关系的,那我放在这块也是可以的,两部分在这里边,我们现在指定了这个列表里边的这个数据,对吧?那这个数据呢,如果我们这么去加载的话,那相当于我们第二页的数据,把第一页里边的所有的数据给替换掉了,这样做肯定是不合适的,所以呢,我们不能用这种方式去做,那我们是怎么做呢?我们用点PUSH,用它加入到数组里面,那加入数组里边压入什么呢?类似里边的word里边DA这么压入,如果这么压入的话,它会以一个子数组的方式进入到我们这个里边,里边也是不对的,所以我们需要把这数组的内容展开。
07:40
追加到列表里边,那这样列表里边当我们手动滑动屏幕的时候,加载到底端,加载一页就会把一页的内容放到列表里边,然后呢,重新刷新数据对吧,新计算高度我们就可以继续滚动就可以了,那加载完一页之后,那当前的页肯定就变了,所以呢,我们将goods里边的。这个里边的。
08:01
呃,页一个配置这个值,让它加等于一,然后下次再刷下一页的时候,又取出加等于一的页,再加一,又取下一页,是这样的一个过程啊。这两个是咱们的一个重点。现在咱们看一下,可不可以我们刷新一下。然后我们看一下下边的打印。它最大化。看下边打印啊,你看我们拉动滚动条的时候,你看当前页第二页我们再往上拉动对吧,可以一直拉动第三页高度你能看到对不对?第四页每页加载十个数据,当我们用手指在手机屏幕上向上滑的时候,就会不断的加载数据,有多少数据加载多少,那我们在切换其他页面的时候,你看又回到了当前页第二页第三页。第四页。还是?都是没问题的,这就是下拉上拉滚动数据的这样的一个情况。那除了这个,当我们滚动到最下方的时候,我们需要出现一个什么,出现一个啊返回顶部的一个按钮,这个时候我们怎么做呢?那我们是不是也得把我们上一节课学过的那个组件我们拿过来呀,对吧,还是到后面里边啊返回顶部的一个组件。
09:10
叫啊B号这样的一个组件,我们拿过来到我们分类的页面在这里边。把它加上。把所有组件的放在一起,然后我们需要把这个组件注册。注册这点CK。BA,对,然后我们需要在这个位置。最后的这个位置。最后一个div的前面就可以了,放到这个里面,然后我们把我们的这个组件。拿过来。当然这里边有一个变量要求我们怎么呢?是否显示这个变量,那我们就可以指定一个高度就可以了,放到我们这块位置,那我们需要一个这样的变量,我们就得声明这个变量。证明那个变量这是块来证变量默认值等于什么等于甲,因它不显示FA。
10:05
默认不显示,当然了,我们得把这个值放到哪去啊,返回去,返回到我们模板里边才可以去使用。返回顶部。然后呢,我们需要在里边点击返回顶部的时候,返回顶部的时候,我们需要一个什么,我们需要一个方法。这里边儿呢,我们还需要做一个这样的一个方法,让他处理返回顶部的一个情况。也就是自定义的事件,在我们组件里边需要返回这样的一个方法,那我们把它写在最下面吧,叫做cost返回b ho这样的一个方法,咱们加一个箭头函数指向这个内容。然后我们调用这个里边的b pro。S加L1格这样的一个方法,然后调用里边的滚动到的一个方法,S c r o l l to滚动到哪里,滚动到零,零的这样的一个位置,当然我们可以加第三个参数,比如说因为它有动画效果,300毫秒滚动完成,这样的话,我们一点击这个按钮的时候,它就有了,但是我们什么时候用这个显示呢?因为默认是假,我们刚试的这个属性。
11:11
那因为这功能是我们,呃前面做过的,所以这里边咱就不用细说了,默认这个值是假的,那我们这里边还得需要干嘛呀。还需要加一个事件,在这里边加一个滚动的设置,滚动的事件,我们得知道滚动的位置。注册。滚。嗯。滚动滚动事件通过这个BS这个里边的O加载一个用去注册这个滚动事件。滚动视线里边,我们只要指定高度就行了,SCRO,然后呢,回调一个方法,有一个位置,位置呢我们叫。然后这里边每次我们滚动的时候,都会把滚动的位置放在这里边,它呢也是个对象,里边有X值和Y值,那我们直接用它的Y值就可以了,也就是呃,posion.y这是它上下垂直滚动的Y坐标的一个位置,当然我们前面加一个负号,这样因为它默认这个值是负的,对吧,我们把它变成正的,如果我们这个值比如说大于了呃300,但是你可以随便自己去写这个位置啊,到300的时候,我们就将我们的这个值。
12:28
加符号,这前面加一个符号吧,加边这无所谓啊,然后我们将它付给什么呢?付给我们这个变量is受点。注意哈,这样的话,我们当我们滑动的位置大于300像素的时候,这个回到顶部的按钮就会出现,那我们看一下,你看现在是默认没出现的,当我们滑动。活动。你刷新一下,看一下这里边儿它有一个错误啊b top,我们没有什么没有返回。
13:00
这里边写的方法在一方用一定得。把它过去才可以啊。来,我们刷新一下。啊,现在就没有警告信息了,对不对,当今页有了刷新,你看当我们刷新超过300像素的时候,就出现了这个按钮,那我们点回到顶部,那以动画的形式回到顶部,对吧?当然这个回到顶部这个高度上面这块有覆盖对不对。那你可以。看我刷新一下。你看刷新一下,上面也有这个,这主要是内容区域的事,那我们可以将这里边加一个样式就可以搞定了。比如说我们在这里边它有一个内容点,希T这个内容区域BK加上ID红色的你看。现在默认都是红色的,上面它也是红色的,往下加载一直拉数据的时候呢,上面永远回不去,对吧,你看我们上面还有很长的地方对不对,它一直到这个位置,因为我们的内容区域被上面的给覆盖掉了,所以要么我们把这个区域给它清除掉,对吧,他。
14:08
嗯,大炮,比如说50像素。你看50有点还有点少,对不对,我们再可以再加一些数据啊,比如说我们这块100吧。0TOP100。你就可以了,对吧,你滚动的时候。他这会又回去了,所以呢,我们就设置这个100像素这个数据就可以了,把这个去掉,所有的样式你都可以去调整。能力对吧。那下边无所谓了,下边你一直可以往上拉的时候,不用管它覆盖对不对。把内容往上传就可以了。然后还有价格。这些地方都没问题。那这样的话,我们这个页面现在就算是完成了,那下一步呢,我们就完就开始做商品分类,呃,商品详情信息的内容分类信息我们就写到这里,好,谢谢大家。
我来说两句