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);

}

}

);

});

相关推荐
wjjzhbb19 分钟前
前端监控:给用户体验装上仪表盘
前端·ux
江湖有缘29 分钟前
Docker实战 | Docker部署Minimalist-web-notepad个人笔记本
前端·docker·notepad++
Hilaku1 小时前
为什么我在团队里禁止使用 axios?
前端·javascript·程序员
兮动人1 小时前
Chrome 152 升级后本地请求全挂了?是 LNA 策略在搞事
前端·chrome·lna·local network
JarvanMo1 小时前
让 3D 在 Flutter 中焕发生机:Flutter GPU 与 flutter_scene 实战经验
前端
狂师2 小时前
太强了!GitHub上开源了一款AI自动化测试框架,0代码搞定前后端测试!
前端·后端·测试
只睡四小时2 小时前
Local-First 数据契约:一张表装下 4 类数据
前端·javascript·架构设计·local-first·数据契约
迅猛龙办公室2 小时前
Python函数实现反转一个只有3位数的整数
开发语言·前端·python
我星期八休息2 小时前
Redis 的原理和使用(2)
前端·数据库·redis·python·mysql·缓存·bootstrap
Java后端的Ai之路2 小时前
19-ReactJS最佳实践
前端·react.js·前端框架