微信小程序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 相关文章推荐
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
Node.js文件操作详解
Aug 16 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
Node.js简单入门前传
Aug 21 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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学习笔记之 函数声明(二)
2011/06/09 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
Python实现的最近最少使用算法
2015/07/10 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
python用什么编辑器进行项目开发
2020/06/17 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
财务人员求职自荐书范文
2014/02/10 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
综治宣传月活动总结
2014/04/28 职场文书
消防标语大全
2014/06/07 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
总结Python变量的相关知识
2021/06/28 Python