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


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 获取和设置Select选项的代码
Feb 07 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 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云打印类完整示例
2016/10/15 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
Python中操作MySQL入门实例
2015/02/08 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
python实现学生信息管理系统
2020/04/05 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
python实现机器学习之多元线性回归
2018/09/06 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
仓库组长岗位职责
2014/01/29 职场文书
十一酒店活动方案
2014/02/20 职场文书
二年级评语大全
2014/04/23 职场文书
档案工作汇报材料
2014/08/21 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
简易版租房协议书范本
2014/10/13 职场文书
交通处罚决定书
2015/06/24 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书