uniapp+uview 图片预览组件

ops/2024/12/17 9:20:32/

uniapp + uview  图片列表预览组件

注意:在app端需要先判断是否存在手机相册权限

<template><!-- css使用的是uview1.0组件中的css --><!-- u-image  使用的是uview1.0的组件 --><view class="u-flex u-row-between u-flex-wrap"><view class="u-m-b-24" v-for="(item, index) in imgList" :key="index"><u-image @click="preImg(index)" :border-radius="borderRadius" :width="width" :height="height" :src="item[name]"></u-image></view><view :style="{ width: width }" v-for="i in remaining" :key="i"></view></view>
</template>

 

<script>
export default {props: {/* 图片宽度 */width: {type: String,default: '144rpx'},/* 图片高度 */height: {type: String,default: '144rpx'},/* 图片圆角 */borderRadius: {type: [String, Number],default: '8'},/* 图片数组 */imgList: {type: Array,default: () => {return [];}},/* 组件内部读取的imgList参数中的属性名 */name: {type: String,default: 'image'},/* 可空余几个位置 */remaining: {type: Number,default: 0},/* 是否可循环预览,默认值为 false */loop: {type: Boolean,default: false}},methods: {preImg(index) {/* app端需要在这里先判断是否已开启相册权限 */let urls = [];this.imgList.map((item, i) => {if (index == i) {urls.unshift(item[this.name]);} else {urls.push(item[this.name]);}});uni.previewImage({urls,loop:this.loop});}}
};
</script>


http://www.ppmy.cn/ops/142606.html

相关文章

穷举vs暴搜vs深搜vs回溯vs剪枝系列一>找出所有子集的异或总和再求和

题目&#xff1a; 解析&#xff1a; 代码&#xff1a; private int ret;//返回周结果private int path;//枚举一个元素就异或进去public int subsetXORSum(int[] nums) {dfs(nums, 0);return ret;} private void dfs(int[] nums, int pos){ret path;for(int i pos; i <…

基于GIT模型的智能图像描述生成器

导入必要的库: from transformers import AutoProcessor, AutoModelForVision2Seq # 用于加载和使用模型 from PIL import Image # 处理图像 import requests # 下载网络图片 from IPython.display import Image as IPImage, display # 显示图像主要函数 analyze_image: …

配置ssh-key连接github

GitHub 通过在 2022 年 3 月 15 日删除旧的、不安全的密钥类型来提高安全性。 具体内容参考如下链接 https://docs.github.com/zh/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent mac配置 ssh-keygen -t ed25519 -C …

环境和工程搭建

1.案例介绍 1.1 需求 实现⼀个电商平台 该如何实现呢? 如果把这些功能全部写在⼀个服务⾥, 这个服务将是巨⼤的. 巨多的会员, 巨⼤的流量, 微服务架构是最好的选择. 微服务应⽤开发的第⼀步, 就是服务拆分. 拆分后才能进⾏"各⾃开发" 1.2 服务拆分 拆分原则 …

第三十一章 Spring之假如让你来写事务——融入IOC容器篇

Spring源码阅读目录 第一部分——IOC篇 第一章 Spring之最熟悉的陌生人——IOC 第二章 Spring之假如让你来写IOC容器——加载资源篇 第三章 Spring之假如让你来写IOC容器——解析配置文件篇 第四章 Spring之假如让你来写IOC容器——XML配置文件篇 第五章 Spring之假如让你来写…

Python解释器和PyCharm详解

目录 1.什么是Python解释器? Python解释器的类型和特性 Python解释器的优势 2.什么工具可以写Python文件? 3.为什么Python解释器和PyCharm不在同一个网站? 1.什么是Python解释器? Python解释器‌是Python程序运行的核心&#xff0c;它的主要作用是将Python代码转换为…

人工智能对我们的生活影响有多大?

人工智能的深刻影响 引言 你好&#xff0c;欢迎来到这个关于人工智能&#xff08;AI&#xff09;的探索之旅&#xff01;在当今社会&#xff0c;人工智能已经渗透到我们生活的每一个角落&#xff0c;从家庭和工作场所&#xff0c;到教育和社会经济领域&#xff0c;都留下了深…

《知识拓展 · 统一建模语言UML》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…