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


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 相关文章推荐
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
小程序实现列表多个批量倒计时
Jan 29 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
vue实现公共方法抽离
Jul 31 Javascript
前端vue如何使用高德地图
Nov 05 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自定义函数返回多个值
2006/11/26 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
PHP生成树的方法
2015/07/28 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
Django中使用group_by的方法
2015/05/26 Python
Apache如何部署django项目
2017/05/21 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
商务日语毕业生自荐信范文
2013/11/14 职场文书
检察官就职演讲稿
2014/01/13 职场文书
培训主管岗位职责
2014/02/01 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
新手上路标语
2014/06/20 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书