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

uniapp实现图片预览,懒加载

实现的功能

  1. 懒加载 lazy-load --对小程序其起效果
  2. 图片预览

效果如图:

在这里插入图片描述
在这里插入图片描述

代码

<template><view class="image-list"><view v-for="(item, index) in imageList" :key="item._id" class="image-card"><image lazy-load :src="item.url" mode="widthFix" @click="previewImage(index)"></image><view class="text">{{ item.author }}</view></view></view>
</template><script setup>let imageList = ref([])uni.showLoading({title: '加载中'})uni.request({url:"https://tea.qingnian8.com/tools/petShow?size=10",header:{'access-key':"zhaohui6968613"},success(res) {console.log(res)imageList.value = res.data.data},complete() {uni.hideLoading();}})function previewImage(index) {const urls = imageList.value.map(item => item.url)uni.previewImage({current: index,urls})}
</script><style lang="scss" scoped>.image-list {.image-card {margin: 50rpx;box-shadow: 0 4rpx 4rpx 10rpx #eee;.text {padding: 10rpx;text-align: right;}}} 
</style>

遇到的问题

1.https在小程序会报错

在这里插入图片描述
解决: 后期打包时候需要配置上地址
在这里插入图片描述

http://www.lryc.cn/news/578978.html

相关文章:

  • React Native 安卓、苹果、鸿蒙5.0 三端适配方案:条件编译 + 平台适配层
  • 信创版nhdeep档案管理系统单机版在银河麒麟桌面系统安装和使用说明
  • UI前端与数字孪生结合探索:智慧建筑的能耗管理与优化
  • 【论文阅读39】PINN求边坡内时空变化的地震动响应(位移、速度、加速度)场分布
  • npm代理设置 + npm配置镜像源
  • Node.js、npm 与 nvm 使用全指南:安装、版本管理与开发环境配置详解
  • 在 Docker Desktop 使用 Kubernetes
  • RuoYi框架低代码特性
  • 鸿蒙自定义相机的拍照页面
  • 深入理解 LoRA:大语言模型微调的低秩魔法
  • 智能合约状态快照技术:实现 EVM 状态的快速同步与回滚
  • YOLOv8模型结构构件及问题汇总【持久更新】
  • HarmonyOS应用开发高级认证知识点梳理 (四)状态管理V2应用级状态
  • 商品中心—18.库存分桶的一致性改造文档
  • GIT基础命令和分支管理
  • Linux环境下使用 C++ 与 OpenCV 实现 ONNX 分类模型推理
  • ESP32与树莓派C++、Rust开发实战
  • 在米联客4EV上部署tinyriscv
  • 高速公路闲置土地资源化利用:广西浦北互通3MW分布式光伏监控实践
  • 基于大模型的急性重症胰腺炎全流程预测与诊疗方案研究
  • 从暴力穷举到智能导航,PC本地搜索被腾讯电脑管家“拯救”
  • 云原生环境下部署大语言模型服务:以 DeepSeek 为例的实战教程
  • Linux操作系统之文件(一):重识IO
  • 解决Linux下根目录磁盘空间不足的问题
  • 基于Cox风险比例模型的会员用户流失预测研究
  • [云上玩转Qwen3系列之四]PAI-LangStudio x AI搜索开放平台 x ElasticSearch: 构建AI Search RAG全栈应用
  • CLIP heat map generation
  • vue中的toRef
  • SpringBoot控制反转
  • 无人机AI制导模块运行方式概述