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


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模板技术
Apr 27 Javascript
兼容ie和firefox js关闭代码
Dec 11 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
Javascript自定义事件详解
Jan 13 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
vue源码解析之事件机制原理
2018/04/21 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
Python求出0~100以内的所有素数
2018/01/23 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
工作个人的自我评价
2014/01/14 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
运动会跳远广播稿
2014/02/04 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
2015年统战工作总结
2015/05/19 职场文书
初三化学教学反思
2016/02/22 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
Python 视频画质增强
2022/04/28 Python
如何Python使用re模块实现okenizer
2022/04/30 Python