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


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 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
vue debug 二种方法
Sep 16 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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
20个PHP常用类库小结
2011/09/11 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
python实现计算图形面积
2021/02/22 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
物流司机岗位职责
2013/12/28 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
pt-archiver 主键自增
2022/04/26 MySQL