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


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获取IE上传文件路径(IE7,8)
Jul 08 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
如何使用Javascript中的this关键字
May 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
PHP 文件类型判断代码
2009/03/13 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php跨站攻击实例分析
2014/10/28 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
python实现逻辑回归的方法示例
2017/05/02 Python
详解python中的闭包
2020/09/07 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
房地产销售大学生自我评价分享
2013/11/11 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
活动总结书
2014/05/08 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
公司授权委托书
2014/10/17 职场文书
安全保证书怎么写
2015/02/28 职场文书
检讨书格式范文
2015/05/07 职场文书
python实现简易名片管理系统
2021/04/11 Python
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python