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


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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
Node实现搜索框进行模糊查询
Jun 28 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
如何基于python实现归一化处理
2020/01/20 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
年度优秀员工获奖感言
2014/08/15 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis