微信小程序开发实战(25):预览图像
时间:2022-07-24
本文章向大家介绍微信小程序开发实战(25):预览图像,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
wx.previewImage方法用来预览图像,所谓预览,就是让图像全屏显示。该方法的Object类型参数的属性在事件触发上和wx.chooseImage方法相同,只是wx.previewImage方法需要设置一个urls属性,该属性为StringArray类型,表示用于预览的图像文件路径集合,其实就是上一节代码中res.tempFilePaths属性的值。
本节会改进上一节的程序,让点击<image>组件后,可以预览图像。首先需要为<image>组件设置一个点击事件函数(previewImage),代码如下:
<image bindtap="previewImage" src="{{imageSrc}}" mode="aspectFit"
style="margin-top:10px;width: 300px; height: 300px; background-color: #eeeeee;" />
接下来需要在data中定义一个imageList属性,用来保存选中的图像临时路径,在选中图像后(onClick函数),需要设置imageList属性的值。最后需要实现previewImage函数。完整的代码如下:
var app = getApp()
Page({
data: {
imageSrc: '',
imageList: [],
},
//选择图像
onClick: function () {
var that = this;
wx.chooseImage({
count: 2,
sizeType: [ 'original','compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
that.setData(
{
imageSrc: res.tempFilePaths[0],
imageList:res.tempFilePaths
}
)
console.log(res.tempFilePaths.length)
}
})
},
previewImage: function (e) {
var current = e.target.dataset.src
wx.previewImage({
urls: this.data.imageList
})
}
})
在真机上运行小程序后,选中一个或多个图像,然后点击<image>组件,就会进入图像预览窗。
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 解析JSON
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 处理静态资源
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 视图Nunjucks
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 代码分层
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ HTTP请求
- ubuntu中安装tomcat
- python文件操作
- Owasp测试4.0手册
- 推荐一款Web渗透测试数据库
- 【提莫】一个域名收集及枚举工具
- chmod: changing permissions of `/usr/local/bin/...
- a windows service with the name MYSQL already e...
- NameError: name 'admin' is not defined(彻底解决方案)
- Error: No module named blog
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 拉格朗日乘子法和KKT约束
- Transformers Assemble(PART IV)
- 【NLP保姆级教程】手把手带你fastText文本分类(附代码)
- 【情感分析】ABSA模型总结(PART I)
- 【Kick Algorithm】十大排序算法及其Python实现
- 【情感分析】ABSA模型总结(PART II)
- 【NLP保姆级教程】手把手带你RCNN文本分类(附代码)
- 【NLP保姆级教程】手把手带你HAN文本分类(附代码)
- 【情感分析】基于Aspect的情感分析模型总结(PART III)
- NLP简报(Issue#6)
- python实现kNN(最近邻)
- python实现朴素贝叶斯
- Transformers Assemble(PART V)
- 面试官问我:如何加载100M的图片却不撑爆内存,一张 100M 的大图,如何预防 OOM?
- 预训练模型中的可插拔式知识融入——利用Adapter结构