微信小程序点击图片预览-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 ...
随机推荐
- 连接池中的maxIdle,MaxActive,maxWait参数
连接池中的maxIdle,MaxActive,maxWait参数 线程池 name:表示你的连接池的名称也就是你要访问连接池的地址 auth:是连接池管理权属性,Container表示容器管理 typ ...
- [C++]Yellow Cards - GYM - 102348A(Practice *) - CodeForces
1 Problem Description Problem The final match of the Berland Football Cup has been held recently. Th ...
- CockroachDB学习笔记——[译]Hello World
原文链接:https://www.cockroachlabs.com/blog/hello-world/ 原作者:Spencer Kimball 原文日期:Jun 4, 2015 译:zifeiy 数 ...
- Outlook2016中如何实现自动密送
Outlook2016中如何实现自动密送 下面的方案您可以参考一下: 1)在Outlook里面键入Alt+F11打开VBA编辑器: 2)激活左边的工程面板,展开并双击上面的“Project (VbaP ...
- css3 Grid栅格系统
Grid 栅格系统的使用 定义容器 .coninater { display: grid; } 多种方式定义单格 1. 按百分比划分 .coninater { display: grid; grid- ...
- [非原创]Office 2019 增强版 批处理激活 亲测成功
忘了原创网址了,在 https://www.52pojie.cn/ 上看到的,这里我备忘一下,希望知道原创网址的朋友告诉我一下,谢谢! 将下面批处理脚本存成.bat文件后,以管理员方式运行: @ech ...
- 【计算机视觉】深度相机(六)--Kinect v2.0 手势样本库制作
目录为1.如何使用Kinect Studio录制手势剪辑:2.如何使用Visual Gesture Builder创建手势项目:3.如何在我的C#程序中使用手势:4.关于录制.剪辑手势过程中的注意事项 ...
- Linux磁盘文件系统与格式化实战(一)
fdisk分区的实质: 用fdisk分区的实质,就是修改0磁头0磁道1扇区的前446字节之后的64字节的分区表信息. 问题:可以使用fdisk分区的磁盘大小必须小于2T,如果大于2T呢,分区就用par ...
- 《鸟哥的Linux私房菜:基础学习篇》第二部分读书笔记
一.Linux的文件权限与目录配置 1. Linux用户身份与用户组记录的文件:默认情况下,/etc/passwd记录所有的系统账号与一般身份账号及root的相关信息,/etc/shadow记录个人的 ...
- mybatis 的一对一关联查询association
现在项目的列表查询数据需要查一个总数count, 如果直接写在同一个sql里面,会导致查询速度很慢, 因此,想到使用关联查询,例子如下: 附上代码: 其中遇到的坑哟: 1.association中的s ...