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


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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
javascript 避免闭包引发的问题
Mar 17 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
vue实现登录功能
Dec 31 Vue.js
详解如何使用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中的phpinfo()函数
2013/06/06 PHP
php对数组排序的简单实例
2013/12/25 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
Python中创建二维数组
2018/10/17 Python
python异常处理try except过程解析
2020/02/03 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
个人找工作自荐信格式
2013/09/21 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
绿里奇迹观后感
2015/06/15 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
安全生产协议书
2016/03/22 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL