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


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 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
javascript中的面向对象
Mar 30 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 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 Class 文章
2007/04/04 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
Python @property及getter setter原理详解
2020/03/31 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
python爬取招聘要求等信息实例
2020/11/20 Python
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
教师自我反思材料
2014/02/14 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
Python自动化实战之接口请求的实现
2022/05/30 Python