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


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 相关文章推荐
JQuery index()方法使用代码
Jun 02 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
jQuery异步提交表单实例
May 30 jQuery
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
极简主义法编写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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
Python编程之序列操作实例详解
2017/07/22 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
旅游安全责任协议书
2016/03/22 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
六年级作文之关于梦
2019/10/22 职场文书