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


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 相关文章推荐
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
js自定义select下拉框美化特效
May 12 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
vue前后分离调起微信支付
Jul 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 开源AJAX框架14种
2009/08/24 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
PHP反向代理类代码
2014/08/15 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
生成二维码方法汇总
2014/12/26 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
pyshp创建shp点文件的方法
2018/12/31 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python list和str互转的实现示例
2020/11/16 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
羽毛球比赛策划方案
2014/06/13 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
教师个人总结范文
2015/02/11 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
浅析JavaScript中的变量提升
2022/06/01 Javascript