00:00
Hello,各位小伙伴大家好。我是上硅谷前端讲师任平老师。这次给大家带来的是继HTMLCSSJS之后的上优选PC端项。在上次课程当中呢,咱们已经完成了呀,放大镜缩略图里边的一个布局效果。本次课程将继续来实现放大镜缩略图的数据动态渲染。在上次课程当中啊,咱们已经提到过了。缩略图当中图片的路径,咱们完成的时候是让它设置成一样的路径。诶,本次课程呢,咱们就将解决这样的一个数据动态渲染的问题。好了,这呢也是一个功能,找到咱们的JS文件,把它单纯独立起来。来上一个注释。叫做动态渲染什么放大镜缩略图的数据。
01:08
嗯,要渲染它啊,来起一个名字吧。Function啊,缩略图当中的数据,嗯。好,那么函数啊,写完了之后,嗯,函数写完了之后,咱们呢,需要来调用一下。嗯,需要来调用啊。那调用完了,咱们就来上一个思路吧,嗯,老规矩啊,第一步先干啥呀?老师,我要肯定要先找数据可以啊,你找数据也行,或者呢,你啊先可以把对应当前这个div里边的那个ul元素给它找到。也可以啊,因为咱们现在要找元素和找数据,它俩其实并不冲突啊,并不冲突,来咱们把这个步骤记录一下啊。
02:04
先获取咱们。Pic list元素下的ul,哎,你说找完ul之后,那里边是不是根据我到底有多少张它的一个缩略图,然后动态渲染什么对应的Li元素。对吧,嗯,我肯定要找ul啊,来第二步再获取什么呢?date.js文件下的,诶,咱们来找一找吧。这个文件啊,打开。咱们需要的是good date。里边的。把它折起来,Images s2C,我需要的是它后面的这个数组,对吧?前面的这个B和这个S是它两个键名,后面的路径呢,是它对应的一个键值,你猜应该都知道B其实是什么big。
03:05
诶,大图的路径S呢,就是墨,诶小图的路径。啊,一个是大图路径,一个是小图路径好。那现在我有数据了,也有元素了,紧接着要怎么着啊,因为数据是不是一个数组很多条对吗?咱们要遍历数组。根据数组的长度来创建元素。啊,当然这个Li里边呢,还是需要有in image的标签啊,创建咱们的元素好。来吧,第一步,咱们需要来获取。P list下的ul。找到对应的这个位置,点击检查来,点到ul右侧给它copy过来。
04:02
等于document点上,嗯。写好了之后啊,怎么老规矩,Cancel点儿log呢?打印一下ul,看他拿没拿到。拿到了没?诶拿到了啊好,那么现在这个元素拿到了之后呢,下一步。下一步,我要获取。什么呢?Images s2C数据,嗯。Were这个变量等于good date,点上imagesc来cancel.log怎么打印一下?发现数据拿到没,拿到了也一共是14条。嗯,一共是14条,好,此时啊,我现在元素也拿完了,哎,数据也拿完了。下一步咱们要干啥了,电力数组了,嗯,电力数组啊,来来一把负循环。
05:04
Y等于。零,嗯,然后I呢,小于in位,四点上length I加加。好,那么根据我的长度来创建对应的LY,把咱们之前写好的布局啊给它打开看一看有没有额外的东西。嗯,Li里边就是一个标签,因位置对吗?嗯,来写第四个创建Li元素。Were new等于document,点上可element,对,把现在的这个LY啊给它创建出来。然后呢,New里边的值。诶,这里边的值呢,它并不是一个纯内容,诶,所以咱们还得需要再干什么,创建一个图片,好来第五步创建因妹纸元素。
06:07
嗯,创建image元素were,一个new image等于document,点上可reach element。来写上一个路径。点上S2C,它里边的路径应该创建一个,它的路径应该来自于数组当中的对应下标,啊来咱们找一找它对应下标里面叫什么,点S对吗?嗯,写上。Image s2c.I点什么点S好了,LAN有了,然后图片有了,那么第六步。让什么?让Li来追加因位质元素,嗯。写好点,A pen child,把你现在的这个图片给它扔进去。但是啊,写到这你没完啊,因为啊,咱们现在的这个LY它是动态创建的,对吗?怎么着你是不是还得让U来进行最后的追加。
07:12
对吧,嗯,第四个啊。让ul变力追加元素。哎,便利追加啊,放在里边。这写上第七个。让ul追加LY元素,嗯,Ul.end child,把new放进去。此时啊,咱们原先所写的这些基础的布局,其实都可以不用要了。嗯,都删掉吧。留一个空空的ul就可以了,Ul不要删啊,Ul删了之后你后面的获取就有问题了,好,现在咱们的图片是不是已经正常了。
08:02
大家发现了没?现在图片是不是已经正常了,跟原来人家的这个结构是不是一模一样了?诶,一模一样了啊好,其实咱们反过回头来看,也就是什么拿元素,拿数据,根据数据的一个长度循环创建你所需要的这些元素,创建Li,创建image,给每一个位的S2C设置它对应的路径,画好了之后先把你的图片放到LA里边。再把你的LA放到ul里边,只不过由于你的LA也是循环当中有一个创建一个,诶,那我ul也得让它干什么,你创建一个我就去追加一个,所以ul最后的追加也要放到循环的内部。好了,这样的话,咱们就整体实现了放大镜缩略图数据的动态渲染功能。
我来说两句