小程序uni-app图片预览uni.previewImage会触发onshow这个生命周期
小程序单张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这个生命周期的更多相关文章
- 微信小程序点击图片预览-wx.previewImage
<view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='im ...
- 微信小程序——网盘图片预览
微信小程序图片预览提供了一个wx.previewImage接口,如下图: 现在我需要对网盘文件里的图片预览,但是网盘从后台返回的数据是各种类型的文件,如下图所示: 那么我们需要解决2个问题: 1.从这 ...
- 微信小程序开发之图片预览
实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...
- 小程序 canvas实现图片预览,图片保存
wxml 代码: <view class="result-page"> <canvas bindtap="previewImage" canv ...
- 微信小程序-点击图片预览
拿接口 有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数
- 小程序图片预览 wx.previewImage
list: [ 'http://img5.imgtn.bdimg.com/it/u=3300305952,1328708913&fm=26&gp=0.jpg', 'http://i ...
- 微信小程序 图片预览 wx.previewImage
官网地址: go官网 效果展示: list: [ 'http://img5.imgtn.bdimg.com/it/u=3300305952,1328708913&fm=26&gp=0. ...
- 微信小程序:点击预览图片
在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...
- 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)
1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...
- 微信小程序:点击预览大图功能
点击预览大图功能 1. 给轮播图swiper-item绑定点击事件 2. 预览功能的本质是调用了小程序的api:previewImage 微信公众号----文档----开发----API----媒体- ...
随机推荐
- Linux中tar文件压缩与解压
文件压缩与解压缩 一般什么情况下使用文件压缩? 备份数据,数据传输 节省磁盘空间 减少带宽使用 减少负载 减少IO操作 什么情况下进行压缩比较合适? 错过业务高峰期,由于文件的压缩会瞬间加大cpu的负 ...
- 从零开始学java(前言)
很长时间以来,自己都非常的懒惰,以前学习的知识都已经记不大清了,入职半年以来,学到的东西不多,反倒以前会的都不会认识了 打算从新开始,从心出发,认真学习 注册博客园是看了狂神说的建议,希望通过养成每天 ...
- web移动端基础
1.像素密度 PPI 说到屏幕就离不开2个因素,屏幕大小和屏幕分辨率. PPI是Pixels Per Inch缩写,pixels per inch所表示的是每英寸所拥有的像素(pixel)数目. PP ...
- canvas(八)绘制图片和坐标转换
1.绘制图片 相关api及其参数:ctx.drawImage() 参数 说明 参数一 图片对象 参数二,三 可选,图片裁剪的基点(原图左上角为原点) 参数四,五 可选,图片裁剪区域的宽高(基于原图大小 ...
- px2rem 实现vue rem 自适应/
npm install postcss-px2rem px2rem-loader --save 新建js 文件rem.js // rem等比适配配置文件 // 基准大小 const baseSize ...
- Dapper.SimpleCRUD:Dapper的CRUD助手
我们在项目开发中,面对一些高并发.大数据量等业务场景,往往对SQL语句的性能要求比较高,这个时候为了方便灵活控制,我们一般就会编写原生的SQL. Dapper就是一个非常高性能的轻量级ORM框架,Da ...
- Python 潮流周刊#81:在个人电脑上运行 GPT-4 级别的大模型(摘要)
本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...
- 上位机与MES数据交互的常用方案
一.前言 随着工业自动化水平的不断提高,我们在做上位机开发的时候,会经常涉及到与MES进行数据交互. 上位机与MES(Manufacturing Execution System,制造执行系统)之间的 ...
- 云数据备份 | CDN 日志备份最佳实践
前言 内容分发网络(Content Delivery Network,CDN),是在现有 Internet 中增加的一层新的网络架构,可以有效降低用户访问延迟,提升可用性. CDN 按照小时粒度对 ...
- 鸿蒙应用开发从入门到入行 - 篇8:Tabs选项卡页签视图切换
鸿蒙应用开发从入门到入行 第八天 - Tabs选项卡 导读:在本篇文章里,您将掌握使用Tabs选项卡做栏目分类,这是未来应用开发中极为常用的组件 首先说一声抱歉,比较忙很久没更新了.但放心吧,目前该忙 ...