有一个我问题如果将第一组的相同图片删掉,而第二组相同的图片不加入数组中,那相同的图片怎么显示呢

有一个我问题如果将第一组的相同图片删掉,而第二组相同的图片不加入数组中,那相同的图片怎么显示呢

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
diffArr.forEach(([, i2]) => {
                this.figures.every((figure, index) => {
                    //将第一组的图片地址存入src中
                  let src = methods.$('img', figure).src;
 
                  if (src === nextImgs[i2]) {
                      console.log(this.figures.splice(index, 1))
                    this.figures.splice(index, 1);
                    console.log(this.figures)
                    return false;
                  }
                  return true;
                });
            });
            this._calcPosition(els);
 
            let needAppendEls = [];
            if (diffArr.length) {
                let nextElsIndex = diffArr.map(([, i2]) => i2); 
                els.forEach((figure, index) => {
                    //将包含的共同照片剔除,添加不同的图片
                    if (!nextElsIndex.includes(index)) {
                        needAppendEls.push(figure)
                    }
                })
            else {
                needAppendEls = els;
            }
            //为什么没用加setTimeout
 
            this.figures.forEach(el => {
                console.log(45)
                el.style.transform = 'scale(0, 0) translate(0%, 100%)';
                el.style.opacity = '0';
             });


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕星星 2019-06-30 14:11:07

你好,是在_calcPosition方法中计算位置的时候将图片都缩放为0了:

http://img1.sycdn.imooc.com//climg/5d18518e0001d6e009780334.jpg

如果用needAppendEls,相同的图片是显示出来的,只不过是缩放样式:

http://img1.sycdn.imooc.com//climg/5d1851ff000105ab14930803.jpg

所以相同的图片也需要添加样式显示出来,不需要重新加载,就是需要设置样式显示出来而已。

自己再理解下。

好帮手慕星星 2019-06-30 10:31:06

你好,可以继续往下面看哦,代码中将下一组所有图片都显示出来了:

http://img1.sycdn.imooc.com//climg/5d181df900015d8710470538.jpg

祝学习愉快!

  • 提问者 慕勒2048820 #1
    那这样不是将所有照片都重新加载了一遍吗,没有将相同的图片不加载啊
    2019-06-30 11:20:16
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码