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


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与CSS复习(三)
Jun 29 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
详解Vue Cli浏览器兼容性实践
Jun 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
一个用php3编写的简单计数器
2006/10/09 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
浅析Python多线程下的变量问题
2015/04/28 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
三好学生自我鉴定
2013/12/17 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
企业读书活动总结
2014/06/30 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
百家讲坛观后感
2015/06/12 职场文书
Python实现机器学习算法的分类
2021/06/03 Python