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


Posted in Javascript onOctober 22, 2020

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

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

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

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

我们可以看到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 相关文章推荐
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
javascript 简练的几个函数
Aug 29 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
详解vue express启动数据服务
Jul 05 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 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
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 #Javascript
You might like
php注入实例
2006/10/09 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
php截取视频指定帧为图片
2016/05/16 PHP
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
js实现查询商品案例
2020/07/22 Javascript
Python解析nginx日志文件
2015/05/11 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python全局变量用法实例分析
2016/07/19 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
python tqdm库的使用
2020/11/30 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
Linux的主要特性
2016/09/03 面试题
道德模范先进事迹
2014/02/14 职场文书
大学生社团活动总结
2014/04/26 职场文书
英文道歉信
2015/01/20 职场文书
情人节活动总结范文
2015/02/05 职场文书
期末个人总结范文
2015/02/13 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
Python词云的正确实现方法实例
2021/05/08 Python