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


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 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php str_pad 函数用法简介
2009/07/11 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
Javascript模块模式分析
2008/05/16 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
实例浅析js的this
2016/12/11 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
Vue自定义指令写法与个人理解
2019/02/09 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
django解决订单并发问题【推荐】
2019/07/31 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
离婚代理词范文
2015/05/23 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android