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


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 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
js获取滚动距离的方法
May 30 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
js module大战
Apr 19 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 常见郁闷问题答解
2006/11/25 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
在Django中创建动态视图的教程
2015/07/15 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
Python 可视化神器Plotly详解
2020/12/26 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
介绍一下grep命令的使用
2012/06/28 面试题
演讲稿开场白
2014/01/13 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
2014年应急工作总结
2014/12/11 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书