当前位置: 首页 > article >正文

vue uniapp里照片多张照片展示

 <view class="leave" style="margin:20rpx 0;">
          <view class="tit">照片展示</view>
          <view class="leafj_pic">
          <view class="relative" v-for="(item, index) of imgList" :key="item">
            <image
              class="w-100 h-100"
              :src="item"
              mode="aspectFit"
              @click="prevImg(index)"
            ></image>
          </view>
        </view>
          </view>

//声明照片list

const imgList = ref([]);

// 点击单张照片可以放大查看

    const prevImg = current => {
      uni.previewImage({
        current,
        urls: imgList.value,
      });
    };

 onMounted(() => {
   //请求后台接口
    baseReq(`接口地址`, 'get').then(
      ({ code, data, msg }) => {
        if (code === 200) {
          detail.value = data;

//多个照片之间用英文逗号拼接,得到数据后对照片进行分割 
          imgList.value = data.imgName.split(',');
          console.log("==="+imgList.value)
        } else {
          Toast(msg);
        }
      }
    );
  });


http://www.kler.cn/a/585294.html

相关文章:

  • 论文阅读笔记——LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS
  • 【RISCV LAB】0x01-安装实验仿真辅助工具
  • AI建模智能生成:从2D到3D,AI只需一步!
  • 结构型模式之适配器模式:让不兼容的接口兼容
  • 工业数采适配99%协议EG8200Mini 边缘计算网关
  • 【零基础入门unity游戏开发——unity3D篇】3D物理系统之 —— 碰撞检测和触发器检测的特殊生命周期函数
  • 【QT】认识 QT 安装 QT 相关软件
  • YOLOv12优化之区域注意力机制(A2)和残差高效层聚合网络(R-ELAN)
  • 【第七节】windows sdk编程:Windows 中的对话框
  • 计算机安全 第四节:访问控制(中)
  • 学习threejs,使用MeshFaceMaterial面材质容器
  • pom.xml中配置的repository,在编译器下载依赖包没生效,怎么解决
  • CNN 稠密任务经典结构
  • 市场趋势分析与策略优化
  • DeepSeek 加持!IvorySQL 文档智能助手正式上线!
  • 疗养院管理系统设计与实现(代码+数据库+LW)
  • 【Rust基础】Rust后端开发常用库
  • linux 命令 case
  • CNN的激活函数
  • 印刷店常用的PDF批量页码统计软件