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


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 相关文章推荐
window.name代替cookie的实现代码
Nov 28 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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 ip2long 出现负数的原因及解决方法
2017/04/05 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
货车司机岗位职责
2014/03/18 职场文书
应聘教师求职信
2014/07/19 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
三孔导游词
2015/02/05 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
大专护理专业自荐信
2015/03/25 职场文书
学校开除通知书
2015/04/25 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript
Minikube搭建Kubernetes集群
2022/03/31 Servers