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


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下4个跨浏览器必备的函数
Mar 07 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
vue之nextTick全面解析
May 17 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 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
PHP工程师VIM配置分享
2015/12/15 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
jQuery 表单验证扩展(四)
2010/10/20 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
Python抓取京东图书评论数据
2014/08/31 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python使用re模块验证危险字符
2020/05/21 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
数据库连接池的工作原理
2012/09/26 面试题
旅行社各个岗位职责
2014/03/15 职场文书
管理标语大全
2014/06/24 职场文书
诚实守信主题班会
2015/08/13 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
zabbix配置nginx监控的实现
2022/05/25 Servers
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技