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


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 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
js字符编码函数区别分析
Jun 05 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
详解Vue数据驱动原理
2020/11/17 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python base64编码解码实例
2015/06/21 Python
Python中的集合类型知识讲解
2015/08/19 Python
python动态加载包的方法小结
2016/04/18 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
法制教育观后感
2015/06/17 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
Python OpenCV形态学运算示例详解
2022/04/07 Python
python三子棋游戏
2022/05/04 Python