微信小程序wx.previewImage预览图片实例详解


Posted in Javascript onDecember 07, 2017

一.小知识

微信小程序wx.previewImage预览图片实例详解

二.例子

1.wxml

<span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container"> 
 <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> 
  <image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image> 
 </view> 
</view></span>

2.wxss

<span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">.container { 
 box-sizing:border-box; 
 padding:20px; 
} 
.previewimg{ 
 float:left; 
 width:45%; 
 height:200px; 
 margin:2%; 
} 
.previewimg image{ 
 width:100%; 
 height:100%; 
}</span>

3.js

使用网络的图

<span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">var app = getApp() 
Page({ 
 data: { 
  imgalist:[ 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496287851&di=0a26048f586b8521 
  93cb5026d60c4fad&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F12%2F74%2F05%2F99C58PICYck.jpg', 
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495693185413&di=0d0acdebf0f532edd0fcdb7 
  6265623c5&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2Fimg013%2Fv3%2F2%2Fd%2F61.jpg', 
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495693185413&di=55835ae37fdc95a317b03f28162c0 
  de1&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201307%2F12%2F20130712224237_nSjht.jpeg', 
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495693185410&di=e28cc03d2ae84130eabc2 
  6bf0fc7495f&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150814%2F0005018308986502_b.jpg' 
 ]}, 
 /** 
  * 预览图片 
  */ 
 previewImage: function (e) { 
  var current=e.target.dataset.src; 
  wx.previewImage({ 
   current: current, // 当前显示图片的http链接 
   urls: this.data.imgalist // 需要预览的图片http链接列表 
  }) 
 } 
})</span>

微信小程序wx.previewImage预览图片实例详解

使用本地的图片:

<span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">var app = getApp() 
Page({ 
 data: { 
  imgalist:[ '../uploads/a01.jpg', 
  '../uploads/a02.jpg', 
  '../uploads/a03.jpg', 
  '../uploads/foods.jpg' 
 ]}, 
 /** 
  * 预览图片 
  */ 
 previewImage: function (e) { 
  var current=e.target.dataset.src; 
  wx.previewImage({ 
   current: current, // 当前显示图片的http链接 
   urls: this.data.imgalist // 需要预览的图片http链接列表 
  }) 
 } 
}) 
</span>

微信小程序wx.previewImage预览图片实例详解

所以这个接口, 按照官方示例, 可能只支持 http 或者 https 协议的网络图片地址.

注意:

网上还有说本地图片确实是不可以的,后面通过选取手机相册内的照片,可以预览,前提是在真机上演示。

微信小程序wx.previewImage预览图片实例详解

下面介绍下微信小程序:点击预览图片

在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片。

1.xml

<view class='detail_img'>
  <view class='view_img' wx:for="{{imglist}}" wx:for-item="image">
   <image src='{{image}}' data-src="{{image}}" bindtap="previewImage"></image>
   </view>
  <view style='clear:both;'></view>
  </view>

2.js

data: {
 imglist:['图片链接','图片链接','图片链接']
 },

/** 
  * 预览图片 
  */
 previewImage: function (e) {
 var current = e.target.dataset.src;
 wx.previewImage({
  current: current, // 当前显示图片的http链接 
  urls: this.data.imglist // 需要预览的图片http链接列表 
 })
 } ,

总结

以上所述是小编给大家介绍的微信小程序wx.previewImage预览图片实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery 绑定时间实现代码
May 03 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
CocosCreator入门教程之网络通信
Apr 16 Javascript
关于JavaScript语句后面的分号问题
Dec 07 #Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 #Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 #Javascript
js实现关闭网页出现是否离开提示
Dec 07 #Javascript
JavaScrip关于创建常量的知识点
Dec 07 #Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 #Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 #Javascript
You might like
探讨php中header的用法详解
2013/06/07 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
PyMongo安装使用笔记
2015/04/27 Python
改进Django中的表单的简单方法
2015/07/17 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python中一行和多行import模块问题
2018/04/01 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
python全栈知识点总结
2019/07/01 Python
python编写俄罗斯方块
2020/03/13 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
经典优秀个人求职自荐信格式
2013/09/25 职场文书
青春寄语大全
2014/04/09 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
介绍信模板
2015/01/31 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
法律意见书范文
2015/06/04 职场文书
七一活动主持词
2015/06/29 职场文书
初一数学教学反思
2016/02/17 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
Python使用Kubernetes API访问集群
2021/05/30 Python
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
python开发人人对战的五子棋小游戏
2022/05/02 Python