00:01
哈喽,各位小伙伴们大家好。那接下来咱们呢,去完成查看SKU列表的loading的效果。那咱们呢,先看一下呢,已经完成的这个项目。比如说啊,用户选择一个手机,手机通讯手机。那么他可以查看某一个PU的所有的SQ的列表。当点击这个按钮的时候啊,会进行查看。但是如果细心的小伙伴会发现一件事,什么事呢?就是它是有一个loading的这样的一个效果。等数据加载完事之后啊,诶,咱们的楼顶就没了。那所以说啊,咱们现在写的这个呀,是没有loading效果的,咱们呢可以看一下。对吧,比如说手机手机通讯手机,那咱们呢,只是把数据给他展示出来了,但是没有loading的效果。所以说啊,咱们呢,去看一下的饿了么UI。
01:03
在他这里啊,是有loading的效果的,就是loading加载。那咱们呢,看一下子loading加载。加载数据时显示动向对吧。比如说像这种的区域加载,那么在表格等容器中加载数据时显示对吧?它是在表格当中用的,而咱们的这个不就是表格吗?那咱们呢,看一下它怎么使用。那首先说啊,饿了么UI提供了两种调用loading的方法。一种呢是指令,另外一种呢是福,对吧,咱们呢,可以看下它是怎么使用的,那也就是说他给他这里面提到了指令对吧,就比如说给table加了一个叫做we loading,等于loading。那么loading呢,应该是一个显示数据,那看一下的底下对吧,Loading为触,那也就是说如果loading为触,会给咱们table啊加上一个loading的效果。
02:04
那回到咱们的项目当中。首先说这不就是咱们的table对吧?展示SKU的列表table。那咱们可以怎么做呢?可以这么做,咱们呢在添加一个属性,比如说叫loading值为什么呀,值为处。那首先说,那咱们呢,想给他添加一个loading的效果,那你就给他来一个指令叫V杠。Loading,那为什么呢?为咱们的loading。那咱们呢,可以看一下咱们的项目是否已添加上了这个,呃,加载的效果。对吧,咱们的测试一下走。那你会发现啊,咱们的这个楼顶效果已经出来了。但是一定要注意,现在咱们的loading这个值啊,它一直是布尔值上针,那所以说咱们的loading的效果啊,会一直有的。
03:02
那什么时候咱们的loading应该消失呢?就是当服务器的数据回来之后,那咱们的loading的效果是不是应该消失?对不?所以说找一下咱们获取SQ列表的那个数据的那个地。对吧,咱们呢,去找一下子,哎,在这呢。这不是获取SKU列表的数据进行展示吗?那么当服务器的数据回来之后,对吧?那你就可以怎么办?让咱们的loading I l。O loading是不是隐藏?那也就是说把咱们的face.loading这个属性设置为false即可。对吧,那咱们呢,回到咱们的项目当中,咱们呢去看一下,比如说手机。手机通讯手机对吧,比如说看一下子以及有loading效果了,以及当服务器的数据回来之后啊,它也消失了。但是啊,这里面呢,存在的一些问题,咱们呢,先看一下数据。
04:05
看这。那首先说当服务器的数据回来之后,咱们loading的属性的属性值变为false了,那咱们再看,那假如说我切换一个PU去查看它的实力呢。那你会发现loading的效果是没有了,那为什么呢?因为咱们loading的属性值会变为一直,为什么一直为false。除此之外啊,还有一个小细活要注意,你看啊,老师来给你们测试一下子,你看比如说图书。电子书刊电子书。盯住这。比如说啊第一次啊老师呢,要查看的是哈哈哈,没问题。是不是有loading,数据回来之后是不是隐藏,但是你在点击别的时候,你会发现一件事,什么事没有loading了。除此之外呢,还有一件事,你看啊,咱们再看。手机,手机通讯。比如说啊老师呢,添加一个SK啊SK吧,比如说123对吧,品牌是测试123对吧,添加一张图片。
05:10
对吧,销售属性老师呢,给他来一个123就随便测试的一个,你看。盯住这。还有一个小效果,你们需要注意来老师呢再测试一下。看这啊,你看第一次老师点击的是苹果12,盯住这先盯住数据啊,盯住数据。现在是真,你看啊。走是不是有loading效果?对吧,以及变为false,当老师再点击123的时候,你会发现诶。数据,也就是说苹果12的SKU列表的数据会进行回写,你看啊。如果点的时候看见了吧,当服务器的数据再回来的时候啊,它才没。所以说啊,咱们这个loading呢,还有几个问题,第一个问题是什么?第一个问题就是咱们的loading效果啊,只能展示一次第一个。
06:03
就是咱们的loading效果,哎,效果目前只会,哎,只会。哎,只会。展示一次,第二个呢,就是快速的啊,快速的切换查看什么呀,SKU,那么会发现上一次的数据会显示。对不,所以说像这些问题呢,小细活呢,都要给他处理一下子,老师呢,再带你们再看一下子,第一个问题是什么。你第一次点击的时候是有loading效果。对不,第二次以后就没了。看没看到。看到了吧,啊。以及啊还有就是你看当老师再点击123的时候来看这啊,老师先这样的玩一下,你看再点123的时候,有的时候会数据进行回显。那也就是说咱们呢,需要把这些问题啊给它搞定。那怎么去解决呢?那首先说当你每次点击这个对话框这个叉子的时候啊。
07:05
你可以把每一次从服务器获取的数据啊,给它清了,因为要展示下一次的数据,以及把咱们的loading的效果呀,把它的fo变变为处就行了,下次它还会进行加载。那所以说啊,咱们得找一下对话框的这个事件,叉子事件。那咱们呢,去找一下对话框dialogue。对吧,Di。咱们找一下。那咱们呢,得找一下它相关的文档了,应该是属性当中,我记得是有一个的。哎,咱们看一下就这了,对吧。关闭。前的回调会暂停dialogue的关闭。对,不,Down是用于关闭dialog。那所以说啊,咱们呢,可以给咱们的dialogue找到咱们的dialogue,给它加上相应的这个属性,咱们找一下这不在这呢。冒号叫做咱们的这个before close,那以及啊,它是需要相应的什么,是不是需要相应的事件,那比如说咱们就叫做close,哎,C。
08:10
那当然啊,咱们呢,现在呢是没有这个方法的找你。那咱们呢,去在底下去写一个咱们自己的方法,老师呢,先把没用的地儿啊,先给他折上。对吧,先给它折上。找找对吧,这。那这个呢,是什么呢,是关闭,哎,关闭对话框的回调。对吧,啊,那么当你一关闭对话框的时候,你要干什么呀?需要把咱们的loading属性,Loading属性哎,再次变为真。对吧,比如说这点loading等于什么呀,等于true以及啊清除一下子清除咱们的SKU列表的数据,每一次都清去展示下次的数据。所以说这点SKU list应该等于个空数组。
09:04
那所以说啊,咱们呢,去看一下子,现在的效果应该是OK了,对吧,手机。手机通讯手机,你看第一次是有loading效果的,当老师一关闭的时候,会触发这个回调,再次把咱们的loading啊变为什么变为震。对不,所以说当你关啊,对,当然你需要给它,呃,当一下,它这里面呢,会注入一个参数,当当呢是用于关闭什么呀?哎,关闭咱们的对话框,关闭对话框。对吧,就是到执行一下。那这回呢,咱们呢,再测试一下子手机手机通讯手机对吧,你看第一次是有loading效果的,以及第二次它也是有的。对吧,啊,第二次也是有的,以及数据呢,也不会进行回响了,对吧,所以说这类问题咱们都给它解决掉了。所以说啊,咱们完成了SKU管理模块了,以及相应的呃,所有的业务全完成了,添加对吧,添加s puu,添加SKU,查看SKU列表以及删除。
10:08
哎,删除这些业务咱们都已经完成了。
我来说两句