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


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 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 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
thinkPHP模板引擎用法示例
2016/12/08 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
奇妙的js
2007/09/24 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
python制作mysql数据迁移脚本
2019/01/01 Python
python3安装crypto出错及解决方法
2019/07/30 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
.NET面试10题
2014/02/24 面试题
外企测试工程师面试题
2015/02/01 面试题
经管应届生求职信范文
2014/05/18 职场文书
篮球比赛策划方案
2014/06/05 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2015年度党员个人总结
2015/02/14 职场文书
革命电影观后感
2015/06/18 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书