微信小程序点击图片预览-wx.previewImage
<view class='imgList'>
<view class='imgList-li' wx:for='{{imgArr}}'>
<image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image>
</view>
</view>
Page({
/**
* 页面的初始数据
*/
data: {
imgArr:[
'http://bpic.jpg',
'http://bpic.jpg',
'http://bpic.jpg',
'http://bpic.jpg'
]
},
previewImg:function(e){
let _this = this
//图片预览
wx.previewImage({
current:_this.imgArr[0] , // 当前显示图片的http链接
urls: _this.imgList // 需要预览的图片http链接列表
})
} })
微信小程序点击图片预览-wx.previewImage的更多相关文章
- 微信小程序-点击图片预览
拿接口 有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数
- 微信小程序开发之图片预览
实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...
- 微信小程序——网盘图片预览
微信小程序图片预览提供了一个wx.previewImage接口,如下图: 现在我需要对网盘文件里的图片预览,但是网盘从后台返回的数据是各种类型的文件,如下图所示: 那么我们需要解决2个问题: 1.从这 ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- 小程序图片预览 wx.previewImage
list: [ 'http://img5.imgtn.bdimg.com/it/u=3300305952,1328708913&fm=26&gp=0.jpg', 'http://i ...
- 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)
1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...
- 【微信小程序】--bindtap参数传递,配合wx.previewImage实现多张缩略图预览
本文为原创随笔,纯属个人理解.如有错误,欢迎指出. 如需转载请注明出处 在微信小程序中预览图片分为 a.预览本地相册中的图片. b.预览某个wxml中的多张图片. 分析:实质其实是一样的.都是给wx. ...
- 微信小程序点击图片全屏
作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...
- 小程序 canvas实现图片预览,图片保存
wxml 代码: <view class="result-page"> <canvas bindtap="previewImage" canv ...
随机推荐
- <JavaScript> 稳妥构造函数模式与工厂模式的区别
稳妥构造函数模式的代码应该是这样的: function Person(name, age, job) { var o = new Object(); // private members var na ...
- c++ map multimap操作
#include <iostream>#include <map>#include <string> using namespace std; int main() ...
- DSS分发压力实验
DSS分发压力实验 昨天为验证依托DSS搭建流媒体直播监控系统的可行性,及确定实时流画面出现严重花屏的原因,做了一个压力实验. 网络拓扑如图: 1.DVR上配置4路视频(CIF / 25fps / 1 ...
- Install Virtualbox on CentOS7---(後話,最終還是沒有用virtualbox做VM server ,感覺只適用于桌面)
參考: https://wiki.centos.org/zh-tw/HowTos/Virtualization/VirtualBox cd /etc/yum.repos.d wget http://d ...
- Linux学习笔记:vim
目录 模式 命令模式 编辑模式 底行模式 .vimrc .viminfo .swap 本文更新于2019-09-05. 说明:下文中,使用{}引起表示自定义变量,根据实际情况填写.使用[]引起表示内容 ...
- jenkins部署Vue项目 & 远程到远程服务
只是记录下自己是怎么配置的,方便自己以后要用的时候查阅 如果使用nodejs打包则需要上图中的脚本,nodejs只是把JavaScript代码去掉空格个换行变成不易于人阅读的方式 (为了方便复制而已, ...
- DNS域名解析系统_1
DNS服务概述: DNS的模式为C/S模式 DNS(Domain Name System)域名系统,在TCP/IP网络中有非常重要的地位,能够提供域名与ip地址的解析服务. DNS是一个分布式数据库, ...
- 告诉你:DOS系统实例手册系列专辑连载中
DOS系统实例手册系列专辑连载中 内容提要:
- 幻数浅析(Magic Number)
在源代码编写中,有这么一种情况:编码者在写源代码的时候,使用了一个数字,比如0x2123,0.021f等,他当时是明白这个数字的意思的,但是别的程序员看他的代码,可能很难理解,甚至,过了一段时间,代码 ...
- kafka 名词解释(四)
为什么要了解这些名词的解释呢?因为在学一个新的知识或者领域的时候,我们需要知道它所定义的概念和名词意思,因为只有这样我们才能理解和掌握这个新的知识点,才能更加系统的掌握这个技术. 一.名词解释 1.b ...