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


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 相关文章推荐
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
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函数utf8转gb2312编码
2006/12/21 PHP
php 问卷调查结果统计
2015/10/08 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
Python实现Linux下守护进程的编写方法
2014/08/22 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
python pandas修改列属性的方法详解
2018/06/09 Python
浅析使用Python搭建http服务器
2019/10/27 Python
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
德国网上药房:Apotal
2017/04/04 全球购物
优秀经理事迹材料
2014/02/01 职场文书
幼儿园老师寄语
2014/04/03 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
2014教师研修学习体会
2014/07/08 职场文书
承诺书模板
2014/08/30 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
新娘婚礼致辞
2015/07/27 职场文书
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript