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


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的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
react MPA 多页配置详解
Oct 18 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
微信小程序实现图片放大预览功能
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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
php 字符转义 注意事项
2009/05/27 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
Yii框架form表单用法实例
2014/12/04 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python IDLE入门简介
2017/12/08 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
pyspark 随机森林的实现
2020/04/24 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
公司市场部岗位职责
2013/12/02 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
市场拓展计划书
2014/05/03 职场文书
人代会标语
2014/06/30 职场文书
2014年文秘工作总结
2014/11/25 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
开工典礼致辞
2015/07/29 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL