微信小程序点击图片放大
WXML:
<view class='imgList'>
<view class='imgList-li' wx:for='{{imgArr}}'>
<image class='img' src='{{item}}' data-src='{{item}}' bindtap='previewImg'></image>
</view>
</view>
WXSS:
.imgList{
width: 100%;
}
.imgList .imgList-li{
width: 100%;
}
.imgList .imgList-li .img{
width: 400rpx;
height: 400rpx;
}
JS:
Page({
data: {
imgArr:[
'http://bpic.588ku.com/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg',
'http://bpic.588ku.com/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg',
'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg',
'http://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'
]
},
previewImg:function(e){
console.log(e.currentTarget.dataset.src);
let that = this;
wx.previewImage({
current:e.currentTarget.dataset.src, //当前图片地址
urls: that.data.imgArr, //所有要预览的图片的地址集合 数组形式
})
}
})
微信小程序点击图片放大的更多相关文章
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- 微信小程序点击图片全屏
作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...
- 微信小程序-点击图片预览
拿接口 有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数
- 微信小程序点击图片预览-wx.previewImage
<view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='im ...
- 微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 微信小程序之裁剪图片成圆形
前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主 ...
- 微信小程序开发之图片预览
实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...
- 微信小程序——网盘图片预览
微信小程序图片预览提供了一个wx.previewImage接口,如下图: 现在我需要对网盘文件里的图片预览,但是网盘从后台返回的数据是各种类型的文件,如下图所示: 那么我们需要解决2个问题: 1.从这 ...
随机推荐
- spark mllib docs,MLlib: RDD-based API
MLlib: RDD-based API This page documents sections of the MLlib guide for the RDD-based API (the spar ...
- codeforces 609C
#include<bits/stdc++.h> using namespace std; ],c[]; int main() { int n,i; while(cin >> n ...
- 后缀数组 + LCP加速多模式匹配算法 O(m+logn)
#include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...
- H3C RIPv1的缺点
- js中的克隆
1.如果克隆对象是基本类型,直接复制就可以 <script type="text/javascript"> var str1 = 'abc' var str2 = st ...
- ASP.NET MVC4.0+EF+LINQ+bui+bootstrap+网站+角色权限管理系统(4)
接下来就是菜单管理了,菜单分为两部分,一部分是菜单管理,另一部分是左边的树形菜单 数据库添加菜单表Menus USE [MVCSystem] GO /****** Object: Table [dbo ...
- vue-learning:12-vue获取模板内容的方式
vue获取模板内容的方式 目录 outerHTML获取内容 template属性获取内容 ES6的字符串模板 <template>标签 <srcipt type="text ...
- C语言动态内存
动态分配内存的概述 在数组一章中,介绍过数组的长度是预先定义好的,在整个程序中固定不变,但是在实际的编程中,往往会发生这种情况,即所需内存空间取决于实际输入的数据,而无法预先确定.为了解决上述问题,c ...
- 【2016常州一中夏令营Day7】
序列(sequence)[题目描述]蛤布斯有一个序列,初始为空.它依次将 1-n 插入序列,其中 i插到当前第 ai 个数的右边 (ai=0 表示插到序列最左边).它希望你帮它求出最终序列.[输入数据 ...
- C++ 动态加载 DLL 时,GetProcAddress() 返回 NULL,GetLastError() 获取错误代码为 127
1.问题现象: 采用“运行期间动态链接”自己的 dll 文件,LoadLibrary() 成功获取 dll 模块句柄,但是 GetProcAddress() 返回 NULL. 2.问题分析: 调用 G ...