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


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实现网页换肤功能
Nov 02 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
详解参数传递四种形式
Jul 21 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 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/10/09 PHP
PHP入门速成教程
2007/03/19 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
js实现数字滚动特效
2019/12/16 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
办理信用卡收入证明范例
2014/09/13 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
Python实现生活常识解答机器人
2021/06/28 Python