效果图:

 ====》  

==》

 代码:

<image mode='aspectFill' bindtap='previewImage'  data-src='{{dataList.avatar}}' src="{{dataList.avatar}}"></image>
/**
* 页面的初始数据
*/
data: {
imgUrls:[],//预览用的
dataList: [],//后台接口返回的数据 暂存区
},
/**
* 预览头像
*/
previewImage(e) {
const current = e.target.dataset.src
// console.log(current)
wx.previewImage({
current,
urls: this.data.imgUrls
})
},

小程序预览图片wx.previewImage的更多相关文章

  1. 微信小程序预览图片

    选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.chooseImage(object) wxml ...

  2. mpvue打小程序预览码

    喂,快给我打一个小程序预览码 前端大全 昨天 (点击上方公众号,可快速关注) 来源:写Bug segmentfault.com/a/1190000015336845 需求 开发小程序的朋友们随时都会听 ...

  3. 微信小程序--预览previewImage(长按保存图片)

    最近开发小程序,想实现二维码图片长按保存,发现无法保存,只能让图片先预览,再保存.注意:只有太阳码才有长按保存和识别功能,普通二维码只有长按保存功能. <image class='banner' ...

  4. 小程序预览pdf文件

    有个业务需求,需要在小程序查看客户已开的发票 发票地址: https://www.chinaeinv.com/p.jspa?cxxxxxxxxxxxx 刚开始是想利用webview当作外链进行跳转访问 ...

  5. 微信小程序预览Word文档

    <view data-url="https://xxxcom/attachment/word.docx" data-type="docx" catchta ...

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

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

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

    一.小知识 二.例子,配合轮播图使用效果更佳!(如图1) 1.wxml <scroll-view scroll-y="true"> <swiper catchta ...

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

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

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

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

随机推荐

  1. MySQL 8.0安装以及初始化错误解决方法

    MySQL 8.0 安装配置及错误排查 官网下载 CentOS7环境下的具体安装步骤 初始化MySQL发生错误的解决方法 忘记数据库root密码 官网下载 mysql官网下载链接:https://de ...

  2. 华为交换机ACL如何使用及原则

    华为交换机ACL如何使用及原则 转载自:辣条①号  源链接:https://boke.wsfnk.com/archives/480.html   ACL(访问控制列表)的应用原则:标准ACL,尽量用在 ...

  3. 《Unity shader入门精要》复习<第13章 关于NDC坐标和深度/法线纹理>

    分为三个地方讲解. NDC(Normalize Device Coordinates)归一化的设备坐标 NDC坐标是世界空间坐标通过MVP变换之后再进行归一化得到的坐标.只需要再一步变换就能得到屏幕空 ...

  4. MySQL CREATE TABLE 简单设计模板交流

      推荐用 MySQL 8.0 (2018/4/19 发布, 开发者说同比 5.7 快 2 倍) 或同类型以上版本. CREATE TABLE TEMPLATE CREATE TABLE [table ...

  5. 报错 ———— Cause: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 2; columnNumber: 6; 不允许有匹配 "[xX][mM][lL]" 的处理指令目标。

    报错 <?xml version="1.0" encoding="UTF-8"?>  必须是XML文件的第一个元素且前面不能空格. ### Erro ...

  6. Redis运维实战之集群中的脑裂

    1.对于分布式Redis主从集群来说,什么是脑裂? 所谓的脑裂,就是指在主从集群中,同时有两个主节点,它们都能接收写请求.而脑裂最直接的影响,就是客户端不知道应该往哪个主节点写入数据,结果就是不同的客 ...

  7. OpenCV开发笔记(七十四):OpenCV3.4.1+ffmpeg3.4.8交叉编译移植到海思平台Hi35xx平台

    前言   移植opencv到海思平台,opencv支持对视频进行解码,需要对应的ffmpeg支持.   Ffmpeg的移植   Ffmpeg的移植请参考之前的文章:<FFmpeg开发笔记(十): ...

  8. FPGA驱动LCD显示红绿蓝彩条

    实验目的:先简单熟悉LCD灯的驱动和时序图的代码实现.设计功能是让LCD显示红绿蓝三种颜色,即三个彩带.本次实验比较容易实现,主要是对LCD驱动时序图的理解和时序参数的配置. 实验条件:1.LCD原理 ...

  9. var、let和const区别

    var.let和const区别 变量提升问题 var声明的变量存在变量提升,而let与const声明的变量不存在变量提升,但存在暂时性死区 即在预编译阶段,js引擎扫描代码时,遇到变量声明,会把var ...

  10. 『忘了再学』Shell基础 — 4、Bash基本功能(history命令)

    目录 1.history历史命令 2.设置命令历史记录的条数 3.清空历史命令 4.历史命令的调用 5.命令与文件的补全 在Linux系统中默认的Shell就是Bourne-AgainShell(简称 ...