微信小程序选择图片和放大预览图片功能


Posted in Javascript onNovember 02, 2017

视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片.

wx.chooseImage({})

此方法是用来选择图片的方法,具体使用如下:

data: {
  avatarUrl:null
 },

首先在数据中定义接收数据的变量,然后调用方法选择图片,将图片显示出来。

bindViewTap:function(){
  var that = this;
  wx.chooseImage({
  // 设置最多可以选择的图片张数,默认9,如果我们设置了多张,那么接收时//就不在是单个变量了,
   count: 1, 
   sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
   sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
   success: function(res){
    // 获取成功,将获取到的地址赋值给临时变量
    var tempFilePaths = res.tempFilePaths;
    that.setData({
    //将临时变量赋值给已经在data中定义好的变量
     avatarUrl:tempFilePaths
    })
   },
   fail: function(res) {
    // fail
   },
   complete: function(res) {
    // complete
   }
  })
 }

此时我们定义的全局变量,也就是data中的url,已经有值了,现在只需要在页面中显示即可。

//点击此按钮调用选择图片的方法,成功后将图片显示在image标签上
 <button bindtap="bindViewTap" type="submit">绑定事件</button>
<image src="{{avatarUrl}}"></image>

如果是多选的话,在显示的时候,就不应该直接显示数据源了,这样会报错的,因为返回的是数组:

<image wx:for="{{avatarUrl}}" wx:key="unique" src="{{item}}"></image>

图片预览:

下面说一下图片预览:

首先在data中定义好数据源:

data:{
  avatarUrl:null,
  pictures: [ 'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',
   'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',
   'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg',
   'https://p1.meituan.net/movie/45f98822bd15082ae3932b6108b17a01265779.jpg',
   'https://p1.meituan.net/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg',
   'https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg',
   'https://p1.meituan.net/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg',
   'https://p1.meituan.net/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg'
  ]
 },

然后创建方法previewImage,实现图片预览:

previewImage: function(e){
  var that = this,
  //获取当前图片的下表
    index = e.currentTarget.dataset.index,
    //数据源
    pictures = this.data.pictures;
  wx.previewImage({
  //当前显示下表
   current: pictures[index],
   //数据源
   urls: pictures
  })
 }

然后再页面中边遍历数据,显示:

<view>
 <image wx:for="{{pictures}}" wx:key="unique"src="{{item}}" data-index="{{index}}" bindtap="previewImage"></image>
</view>

先列表显示全部图片,绑定预览方法,点击图片进行左右预览,

下面在给大家补充下微信小程序图片放大预览功能,具体内容介绍如下所示:

需求:当点击图片时,当前图片放大预览,且可以左右滑动

微信小程序选择图片和放大预览图片功能

实现方式:使用微信小程序图片预览接口

微信小程序选择图片和放大预览图片功能

我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中

wxml代码:

<!--图片描述-->
 <view wx:if="{{item.pictures}}" class="list-dImg">
 <image bindtap="imgYu" data-list="{{item.pictures}}" data-src="{{dImg}}" wx:for="{{item.pictures}}" wx:for-item="dImg" src="{{dImg}}"></image>
 </view>

js代码:

//图片点击事件
 imgYu:function(event){
 var src = event.currentTarget.dataset.src;//获取data-src
 var imgList = event.currentTarget.dataset.list;//获取data-list
 //图片预览
 wx.previewImage({
 current: src, // 当前显示图片的http链接
 urls: imgList // 需要预览的图片http链接列表
 })
 }

1.给图片添加一个点击事件(imgYu)

2.使用event.currentTarget.dataset.自定义属性名称   来获取data-的值 如event.currentTarget.dataset.src  (获取data-src的值)

3.之后将获取的两个值 放到wx.previewImage接口 里面即可

效果图片如下:可以左右滑动上一张下一张

微信小程序选择图片和放大预览图片功能

总结

以上所述是小编给大家介绍的微信小程序选择图片和放大预览图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中的cookie的读写操作示例详解
Apr 17 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
React组件对子组件children进行加强的方法
Jun 23 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
何时使用Map来代替普通的JS对象
Apr 29 Javascript
微信小程序实现图片放大预览功能
Oct 22 #Javascript
极简主义法编写JavaScript类
Nov 02 #Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 #Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 #Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 #Javascript
为输入框加入数字js校验代码分享
Nov 02 #Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 #Javascript
You might like
PHP面向对象编程快速入门
2006/12/14 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
基于python实现查询ip地址来源
2020/06/02 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
岗位竞聘演讲稿
2014/01/10 职场文书
大学生评语大全
2014/04/18 职场文书
妇女干部培训方案
2014/05/12 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
负责培养人意见
2015/06/05 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL