微信小程序实现预览图片功能


Posted in Javascript onOctober 22, 2020

本文实例为大家分享了微信小程序实现预览图片的具体代码,供大家参考,具体内容如下

先看下效果图:

微信小程序实现预览图片功能

这种效果在一些商城类的小程序里是很常见的一种功能,实现起来也很简单

下面我们来看一下代码:

我的这些图片资源是从后台拿到的,你们看一下具体的需求,一般都是后台返回,毕竟小程序是有大小限制的。

<view class='contentbot'>
  <view class='contentWa' wx:key='id' wx:for='{{wawa}}'>
  <image src='{{item.img_url}}' mode='widthFix' data-src='{{item.img_url}}' bindtap='previewImage'></image>
   <text class='waName'>{{item.name}}</text>
  </view>
</view>

CSS:

.contentWa {
 margin-top: 20rpx;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
}
.contentWa image {
 margin: 0;
 padding: 0;
 width: 100%;
}
.getWa{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}
.waName {
 width: 100%;
 height: 80rpx;
 line-height: 80rpx;
 font-size: 30rpx;
 text-align: center;
 background: #fff;
 display: inline-block;
}

JS:

//预览图片
 previewImage: function (e) {
  var current = e.target.dataset.src;
  var imgList = [];
  for (let i = 0; i < this.data.wawa.length; i++) {
   imgList.push(this.data.wawa[i].img_url);
  }
  wx.previewImage({
   current: current,//当前点击的图片链接
   urls: imgList//图片数组
  })
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
微信小程序自定义可滑动日历界面
Dec 28 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 #Javascript
微信小程序实现多选功能
Nov 04 #Javascript
微信小程序实现无限滚动列表
May 29 #Javascript
微信小程序自定义轮播图
Nov 04 #Javascript
微信小程序实现带缩略图轮播效果
Nov 04 #Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 #Javascript
微信小程序实现下拉菜单切换效果
Mar 30 #Javascript
You might like
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
微信小程序开发探究
2016/12/27 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
世界文化遗产导游词
2019/08/07 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
创业计划书之干洗店
2019/09/10 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技
Go语言编译原理之变量捕获
2022/08/05 Golang