Taro/微信小程序 实现微信朋友圈九宫格图片点击放大

        {/* 图片：当为1张图片时 oneImg，当图片为 4张时，两行展示 twoImg ，当图片既不是1张又不是4张时， imgView */}

                    {item.imgs.length > 0 && (
                      <View
                        className={`${
                          item.imgs.length == 4 ? "noWarp" : "imgs"
                        }`}
                      >
                        {item.imgs.map((items) => {
                          return (
                            <Image
                              mode='aspectFill'
                              key={item}
                              onClick={() => this.imgClick(item.imgs, items)}
                              src={items}
                              className={`${
                                item.imgs.length == 1 ? "oneImg" : "imgView"
                              }`}
                            ></Image>
                          );
                        })}
                      </View>
                    )}

点击图片放大
https://taro-docs.jd.com/taro/docs/apis/media/image/previewImage

  imgClick(imgs, img) {
    Taro.previewImage({
      // 所有图片
      urls: imgs,
      // 当前图片
      current: img,
    });
  }

  .ansImgView() {
            .imgView {
              width: 166px;
              height: 166px;
              border-radius: 8px;
              margin-bottom: 10px;
              margin-right: 10px;
            }
            .oneImg {
              width: 288px;
              height: 374px;
              border-radius: 8px;
              margin-bottom: 10px;
            }
          }
          .noWarp {
            width: 400px;
             display: flex;
  align-items: center;
  flex-wrap: wrap;
            .ansImgView;
            .imgView:nth-child(2n) {
              margin-right: 0;
            }
          }
          .imgs {
           display: flex;
  align-items: center;
  flex-wrap: wrap;
            .ansImgView;
            .imgView:nth-child(3n) {
              margin-right: 0;
            }
          }