小程序单张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. 使用Cfssl生成etcd证书(pem)

    CFSSL是CloudFlare开源的一款PKI/TLS工具,CFSSL包含一个命令行工具和一个用于签名,验证并且捆绑TLS证书的HTTP API服务,使用Go语言编写. github: https: ...

  2. linux bash shell 中的单引号和双引号

    摘抄自:ABS_CN 当要引用一个变量的值时,一般推荐使用双引号.使用双引号除了变量名[2]前缀($).后引符(`)和转义符(\)外,会使shell不再解释引号中其它所有的特殊字符.[3] 用双引号时 ...

  3. 在vue中使用html2canvas生成图片

    首先,在vue中引入html2canvas,执行命令 npm install --save html2canvas 然后在需要生成图片的页面中引入 import html2canvas from 'h ...

  4. 项目监控之sentry

    github: https://github.com/getsentry/sentry 1.什么是sentry? 当我们完成一个业务系统的上线时,总是要观察线上的运行情况,对于每一个项目,我们都没办法 ...

  5. python之常用开发包

    1.passlib (https://passlib.readthedocs.io/en/stable/) passlib 目前常见的不可逆加密算法有以下几种: 一次MD5(使用率很高) 将密码与一个 ...

  6. vue使用高德地图初始化坑

    使用的时候有时候会报除Amap没有定义之外的错如 TypeError: v.w.uh is not a constructor Uncaught TypeError: Cannot read prop ...

  7. .NET 模拟&编辑平滑曲线

    本文介绍不依赖贝塞尔曲线,如何绘制一条平滑曲线,用于解决无贝塞尔控制点的情况下绘制曲线.但数据点不在贝塞尔曲线的场景. 在上一家公司我做过一个平滑曲线编辑工具,用于轮椅调整加减速曲线.基于几个用户可控 ...

  8. Flutter之GetX之路由管理

    GetX之路由管理 GetX有一套完整的路由管理,并且不需要context上下文,API非常简洁 直接导航 导航到新的页面 Get.to(NextScreen()); 返回,此方法可以用于关闭Snac ...

  9. Mybatis plus 多表联查字段名重复报错 Column ‘id‘ in where clause is ambiguous

    一.报错信息 Caused by: Column 'xxxx' in where clause is ambiguous 二.报错原因 表 person 和 表 class 都有字段 id 和 nam ...

  10. Composer: Command Not Found

    I am using CentOS and had same problem. I changed /usr/local/bin/composer to /usr/bin/composer and i ...