微信小程序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 相关文章推荐
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 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 daodb插入、更新与删除数据
2009/03/19 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
PHP asXML()函数讲解
2019/02/03 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
求职推荐信
2013/10/28 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
入党申请自荐书范文
2014/02/11 职场文书
垂直极限观后感
2015/06/08 职场文书
新郎婚礼致辞
2015/07/27 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
python not运算符的实例用法
2021/06/30 Python
Python 可迭代对象 iterable的具体使用
2021/08/07 Python