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


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+CSS 实现遮罩层的简单代码
Oct 14 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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 高级课程笔记 面向对象
2009/06/21 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
Django权限设置及验证方式
2020/05/13 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
伊索寓言教学反思
2014/05/01 职场文书
提拔干部考察材料
2014/05/26 职场文书
文秘应届生求职信
2014/07/05 职场文书
责任书范本
2014/08/25 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
员工辞退通知书
2015/04/17 职场文书
暂住证证明
2015/06/19 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL