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


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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
vue实现动态按钮功能
May 13 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
dedecms系统常用术语汇总
2007/04/03 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
pandas中Timestamp类用法详解
2017/12/11 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
打架检讨书2000字
2014/02/22 职场文书
商务英语广告词大全
2014/03/18 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
试用期辞职信范文
2015/03/02 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python