小程序单张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. 网站统计代码v1.0

    var m = {}; var p ={}; var gifUrl = 'http://hm.iwgame.test/v.gif'; (function() { //参数组合类 m = { ck : ...

  2. 深入理解ReferenceQueue GC finalize Reference

    关于对象如何销毁以及finalize更详细的信息 目录 概述 1 先看一个对象finalize的顺序问题. 2 对象再生及finalize只能执行一次 3 SoftReference WeakRefe ...

  3. AbstractQueuedSynchronizer源码解析之ReentrantLock(一)

    在上一篇笔记中提到concurrent包中semaphores, barriers, and latches等Synchronizer的介绍和使用,于是想深入的了解这些Synchronizer的原理和 ...

  4. 用java实现JDBC数据库连接池

    这次写数据库连接池主要想解决的还是servlet访问数据库获取数据的稳定性问题,于是便研究了一下,下面来讲一讲如何用java来写一个适合自己用的数据库连接池.这个东西大家并不陌生,通过使用数据连接池我 ...

  5. 《HelloGitHub》第 104 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. github.com/521xueweihan/HelloG ...

  6. Echarts 坐标轴

    1.坐标轴组件配置项总览 坐标轴分为x轴和y轴,操作这两个轴的字段分别为xAxis和yAxis var option = { xAxis:{ name:"月份", axisTick ...

  7. Qt 子窗口 隐藏标题栏的图标,在任务栏上的不显示

    Qt子窗口使用Qt::Dialog样式时,隐藏窗口标题栏图标方法: this->setWindowIcon(QIcon()); Qt子窗口,在任务栏上的不显示,最简单的方法是设置Qt::Tool ...

  8. 中电金信:GienTech动态|丰收之秋,公司多项目获得荣誉

    ​ 中电金信微电影<妙"笔"生花>获国资委表彰 ​ 近日,国务院国资委在京举行中央企业社会主义核心价值观主题微电影(微视频)展映发布活动.中电金信作品<妙&quo ...

  9. 2024年1月Java项目开发指南3:创建Springboot项目

    本文档编写于贰零贰肆年一月八日@萌狼蓝天 如果你不知道什么是springboot,那么你只需要知道,这是一个让我们减少配置工作量,方便开发的开发框架,能让我们更专心于业务开发,省的被各种各样的配置浪费 ...

  10. Qt音视频开发30-qmedia内核qt4方案phonon播放(支持视频流)

    一.前言 在Qt4中如果需要播放视频,一般用phonon多媒体框架,这应该就是Qt5/Qt6中多媒体框架的前身(查阅qmultimedia模块的相关代码可以发现架构几乎雷同,除了部分命名变了以外),p ...