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


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 作用域使用说明
Aug 13 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
删除节点的jquery代码
Jan 13 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
Vue动态获取width的方法
Aug 22 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
layui文件上传控件带更改后数据传值的方法
Sep 23 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中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
jquery向后台提交数组的代码分析
2020/02/20 jQuery
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python得到单词模式的示例
2018/10/15 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python打开windows应用程序的实例
2019/06/28 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
jupyter notebook实现显示行号
2020/04/13 Python
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
临床医学专业学生的自我评价分享
2013/11/21 职场文书
五好关工委申报材料
2014/05/31 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书