00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们做了这个轮播,使用的是VNT这个开源的组件库,有赞提供的,那这个组件库的好多功能呢,咱们每一个组件用到的时候,咱们再详细的讲解,那这节课呢,咱们再用两个呃,简单的功能来解决我们首页的一个问题,比如说懒加载,那它所有图片都可以设置这种懒加载,如果不是懒加载的话,我们一刷新,你看页面的结构,刚开始的时候,图片在没显示的时候,给别人的感觉是很不好的。对吧,那我们就需要怎么办,我们就需要在这个里边,当然我们这边还有个小问题,一刷新的时候,上边这个位置我们看一下后膜。我们把这个去掉就是。刷新一下。你刷新可以没问题啊,上面多了一个这个。好,可以回去了,那我们在设置这种,呃,懒加载图片是非常有必要的,这样给用户的感觉会很好,也就一刷新的时候会默认加载一个图片,然后等新的图片过来之后再显示你新的图片,保证页面结构不变形是很有好处的。那我们看一下怎么做,懒加载也是通过VNT这样的组件去使用,那找到这里边的懒加载。
01:16
你看这是懒加载对吧,首先呢,也是一样的,我们先得引入这个对吧。诶,复制一下。那你如果一次性全部引入的话,你就不用像咱们现在是一个一个引入,咱们现在学哪个标记哪个,这样的话给你的感觉咱们学一个用一个来加载,那在这里边我们也得加上一个use,把这个加载进来,这样的话我们就把懒加载的这个组件加过来了,那任何地方在用图片的时候,你看任何地方在用图片的时候。就可以干嘛呀,就可以直接使用V-lazy对吧,来加载这个方式,指定图片的路径就可以了,我们找到我们的项目里边,把所有用到图片的地方,比如说咱们刚刚写的一个班截图对吧,班截图里边。
02:03
在这块图片我们就不用SR7了,我们用这个。V-lazy这样的话我们再刷新一下。看一下价你刷新。这个下边好像复制了一份。不是复制了一份,它默认有一个默认的图片,应该是太高了。默认的图片太高了啊。看不出来,那这样我们可以改变这个所有的懒加载的缺认图片,我们先加上,然后呢,咱们再一起去改变这个图片的位置啊,这个位置有图片,那我们这个位置,你看这个位置也有图片,看到了吗?这个位置也有图片。嗯,你看刚才那个问题是在哪啊,你看默认加载过来,也就其他的没有轮播过的,它默认图片特别的高,对吧,所以呢,导致我们这个显示不了,所有的图片都轮播完了,默认图片就不用了,你看它就回来了,是这样的情况。然后我们再把其他的所有的地方都改成懒加载,把src都去掉,比如说这里边的,呃,商品列表,商品选项,这里边我们找一下这块src我们也换成满加载。
03:12
你看,所有的一闪而过,它的结构没有变化。这个有点高了。有点看不出来。这个加载速度太快了,嗯,没关系啊,那咱们一会儿再换成确认图片再看一下。这个地方需要玩加载,还有我们首页里边,首页里边有个推荐对吧,这个里边用到的图片也都是需要用到玩加载的,我们只要换上这个标记。就可以了,来我们在首页里边,你看刷新一下。页面结构是没变的,对吧,但这个太高了,那我们把这个确认图片我们再换一下,确认图片在哪换呢?我们先看一下有没有一个,我们自己有没有确认图片在我们的麦这里边。
04:02
嗯,以前做过这样确认图片,这个这是我们的,呃,一个域名对吧,一个确认图片不高的这样的一个情况,原来他默认的确认图片比较高的,你可以把那个默认图片的样式去改变,也能解决这个问题啊,有了确认图片,那我们确认图片在哪去加载呢?找到我们加载的地方,可以通过第二个参数找到。呃,后慢点GS在这里边这个方法它有第二个参数,也就是呃,我们使用指定一个加载的一个图片这里面。加了一片。可以在这块直接敲开吧,没问题。对齐一下看看好一些啊,然后这里边我们选RO d loading,因为以前如果不用这个组件的话,我们是专门写一个插件,也是这种加载的一个方式啊,是一样的捞包底加载那图片的话我们得打包对不对,铝块。然后加载一个,嗯,就是跟它当前同级目录下的as set,因为不是在在慢点GS里边对吧,所以它这里用了别名加上image下边的缺少这个图片,这样的话我们保存一下。
05:13
来,你看默认的图片就可以了,就把默认图片用我们自己的图片,你看加载的时候都使用默认图片,然后真的数据过来,会把默认图片给换掉,这就是懒加载的效果,再刷新一下,你看页面结构是没有变的。对吧,上面这个问题也解决了,你看。只有管道电到的时候才去下载那个图片。不然的话用确认的图片就可以解决,所以咱们所有的页面在使用图片的时候,都可以使用这种懒加载的方式去解决就行了,然后我们再看一下,再用一下徽章,找一下把我们购物车上面这块加载一个数据,使用一下徽章,当然徽章的数据呢,我们得写购物车的时候我们再去,呃,具体的引用这里边儿,我们就暂时应用一下,找到这里边的组件,我们看一下怎么用徽章。找到这里边徽章看一下啊呃,徽章内容组件图片加载。
06:05
徽章徽章这种徽章这种的对吧,你看基本用法这块加一个加一个数量,那我们使用的时候,我们首先样的套路。当然你引入过后期再重复用的时候,你就不用引入了,所以咱现在选哪个,咱们引入哪个,在这里边把这个徽章加进来,那这里边儿再来一个点use,把这个徽章加进来就可以了,这样的话我们就可以使用这个呃徽章了,那看这徽章怎么使用,直接。使用比如说最大值最小值的,这样,咱们比如说购物车,一般的咱们装十个八个的对吧,基本上就购买了,所以咱们就最大值是十的这个就可以。那。咱们找一下看用哪个比较合适,最大值是十,最大值是九,内容是20,超过九的时候,超过九的时候就会出现什么,出现这个加号。复制一下这个。咱们在购物车,购物车这个图标,咱们在APP这里边儿,对吧,在这写的。
07:06
这个是公车我们的,呃,图标的这个位置,那我们现在把这个徽章可以加到哪,加到这个位置。加到这个位置,然后嗯。Div,我看一下啊。最外层的div啊在这。那我们还是用我们自己购物车的这个图标,那只不过我们把这个徽章。这块。徽章这个元素,我们给它放到这个位置。这个位置,然后这里边用上这个子元素啊,子元素也可以,你直接这样把它包裹起来,对吧,最大值是20的时候,那它就是最大值会显示九这样的一个徽章,嗯,当然这块我们后期肯定是用的变量,你先在这块临时先用一下,看一下好不好使。拿过来在这里边你看就显示的对吧。这块超过九个都会显示九,再个加号,那比如说如果就两个的话,我对一下这块就是二对吧,但是它现在默认是零,那我这块加一个零就可以了,这是徽章。
08:05
我的首页。不吃。都可了,那这数据我罗曼没有过来,但没有过来,他现在也有这个默认图片啊。行,咱们就用这个图标吧,这当然了,我们像购物车下边底底栏的这样的一个菜单,咱们有也有组件,你可以去,不用咱们自己写,你可以去换一下啊,咱们这里比如这里边有标签栏对吧,这标签栏咱们前面写我你看这种对吧,这个画有这样的一个标签,咱们可以直接换一下,其实跟咱写的效果是差不多的,但是还是用它的组件,功能齐全一些。好,谢谢大家,这节课我们就到这里,到这里边儿呢,我们首页的所有功能基本上给大家介绍完了。首页的功能。以及导航的页面啊,这些咱们都做了两加载,咱们都运作了缓存保持生命的那个,现在咱们也全用完啊,还有一些功能,咱们您可以后期自己去添加,比如说点击收藏啊,对吧,一点击跳转啊,一点击跳转到商品详情页,那个咱们得后期再去处理好,谢谢大家,这节课我们讲到这里。
我来说两句