小程序单张uni-app图片预览

uni.previewImage({
current:0,
urls: [mess.honorIcon],//['你的图片地址']
});

小程序多张图片预览

<view class="img-boix-view">
<image class="limit-size" :src="imgcont.key" @tap="screenallView(allimgArr,imgindex)"
v-for="(imgcont,imgindex) in allimgArr" :key="imgindex">
</image>
</view> screenallView(imgcont, index){
uni.previewImage({
current:index,
urls: imgcont.map(v=>v.key),//['你的图片地址']
});
},

使用uni.previewImage需要注意的问题

uni.previewImage在在关闭的时候,会去调用onshow(){}这个生命周期
所以如果onshow中有接口调用的时候,需要注意一下;是否会产生数据的堆叠 noexebshowFalg:true, //控制是否会触发生命周期 onShow() {
if(this.noexebshowFalg){
this.classTeacherSubjectList_api();
}
}, // 全屏
screenallView(imgcont, index){
this.noexebshowFalg=false;//不允许再次触发onshow这个声明周期
uni.previewImage({
current:index,
urls: imgcont.map(v=>v.key),//['你的图片地址']
});
},

小程序uni-app图片预览uni.previewImage会触发onshow这个生命周期的更多相关文章

  1. 微信小程序点击图片预览-wx.previewImage

    <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='im ...

  2. 微信小程序——网盘图片预览

    微信小程序图片预览提供了一个wx.previewImage接口,如下图: 现在我需要对网盘文件里的图片预览,但是网盘从后台返回的数据是各种类型的文件,如下图所示: 那么我们需要解决2个问题: 1.从这 ...

  3. 微信小程序开发之图片预览

    实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...

  4. 小程序 canvas实现图片预览,图片保存

    wxml 代码: <view class="result-page"> <canvas bindtap="previewImage" canv ...

  5. 微信小程序-点击图片预览

    拿接口  有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数

  6. 小程序图片预览 wx.previewImage

      list: [ 'http://img5.imgtn.bdimg.com/it/u=3300305952,1328708913&fm=26&gp=0.jpg', 'http://i ...

  7. 微信小程序 图片预览 wx.previewImage

    官网地址: go官网 效果展示: list: [ 'http://img5.imgtn.bdimg.com/it/u=3300305952,1328708913&fm=26&gp=0. ...

  8. 微信小程序:点击预览图片

    在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...

  9. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  10. 微信小程序:点击预览大图功能

    点击预览大图功能 1. 给轮播图swiper-item绑定点击事件 2. 预览功能的本质是调用了小程序的api:previewImage 微信公众号----文档----开发----API----媒体- ...

随机推荐

  1. 基于Ubuntu搭建Pwn调试环境

    Pwn环境配置 本文演示使用干净的Vmware下安装的的 Ubuntu 18.04 LTS镜像 配置以下Pwn环境: OS(系统)配置 VMware Tools net-tools open-vm-t ...

  2. git cherry-pick 同事代码commit后 如何修改为自己的author

    如果有个功能是同事在做,但是做到一半,需要接手帮忙修改或者完成后续,可以切入他的分支 git checkout 分支名称 直接开发,也可以 git checkout -b 新分支名称 这样就完全拥有他 ...

  3. WSL2 使用 code . 命令打开文件夹时,出现 "Unable to establish SSL connection. ERROR: Failed to download..."

    1. 背景 在 wsl2 里开发一个小项目,之前一直使用功能正常. 今天按以往的流程(打开 wsl2(ubuntu) 终端,进入到指定文件夹目录下,输入 code . 命令,在 vscode 中打开该 ...

  4. MySQL同步ES方案

    1. 前言 在实际项目开发中,我们经常将 MySQL 作为业务数据库,ES 作为查询数据库,用来实现读写分离,缓解 MySQL 数据库的查询压力,应对海量数据的复杂查询. 这其中有一个很重要的问题,就 ...

  5. MySQL之使用pt-online-schema-change在线修改大表结构

    原因: 最近公司上一个功能, 需要为其中某个表中新增字段,但是考虑到线上数据已经达到300w+的级别,同时使用的mysql的版本是5.7而非8.0,这会导致新增字段的时候,对全表进行加锁,直到添加完毕 ...

  6. 工作流调度系统之DolphinScheduler

    Apache DolphinScheduler 是一个分布式去中心化,易扩展的可视化 DAG 工作流任务调度系统.致力于解决数据处理流程中错综复杂的依赖关系,使调度系统在数据处理流程中开箱即用. 我这 ...

  7. 2022GPLT

    老板的作息表 检查任意一张时间表,找出其中没写出来的时间段. 输入第一行给出一个正整数 \(N\),为作息表上列出的时间段的个数.随后 \(N\) 行,每行给出一个时间段,格式为: hh:mm:ss ...

  8. GUETSEC

    1. GUETSEC栈溢出 可以看到它看起来好像有四个栈溢出,我们逐个点进去 __isoc99_scanf("%20s", v1):限制了读取20个字符串(但其实无法完全杜绝缓冲区 ...

  9. PM-企业数字化转型,数据治理是关键

      企业数字化转型是大势所趋,通过数据治理.数据平台建设.数据分析与建模,把数据变成服务,使数据能在企业内顺畅流动起来,为企业带来巨大的价值.数据是企业数字化转型的重要基础.   数据能创造价值,但数 ...

  10. 基于.NET WinForm开发的一款硬件及协议通讯工具

    前言 今天大姚给大家分享一款基于.NET WinForm开发的一款硬件及协议通讯工具:PLC-CommunTools. 项目介绍 PLC-CommunTools是一款基于.NET WinForm开发的 ...