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


Posted in Javascript onJanuary 31, 2018

本文为大家分享了微信小程序实现图片预览的具体代码,供大家参考,具体内容如下

效果图

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

原理

  • 使用wx.chooseImage选择本地图片;
  • 使用wx.previewImage预览图片。

WXML

<view>
 <button bindtap="previewImage" type="primary">图片上传预览</button>
 <view class="tui-content"> 
 <image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" data-src="{{item}}" src="{{item}}"></image>
 </view>
</view>

WXSS

page{background-color: #efeff4;}
.tui-preview-img{
 width: 200rpx;
 height: 120rpx;
}

JS

Page({
 data: {
 previewImageArr:[]
 },
 previewImage(e){
 var self = this;
 wx.chooseImage({
  count:8,
  success(res) {
  var tempFilePaths = res.tempFilePaths;
  self.setData({ previewImageArr: tempFilePaths});
  }
 })
 },
 changePreview(e){
 var self = this;
 wx.previewImage({
  current: e.currentTarget.dataset.src,
  urls: self.data.previewImageArr
 })
 }
})

注意

wx.previewImage的参数current和urls必须是http链接。

DEMO下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 #Javascript
微信小程序实现MUI数字输入框效果
Jan 31 #Javascript
微信小程序实现折叠面板
Jan 31 #Javascript
Vue中render函数的使用方法
Jan 31 #Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 #Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 #Javascript
微信小程序实现全国机场索引列表
Jan 31 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php 过滤危险html代码
2009/06/29 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
js中的闭包学习心得
2018/02/06 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Python错误处理操作示例
2018/07/18 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
小学班主任寄语大全
2014/04/04 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
医学检验专业自荐信
2014/09/18 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
院系推荐意见
2015/06/05 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
MSSQL基本语法操作
2022/04/11 SQL Server