微信小程序实现图片放大预览功能
更新时间：2020年10月22日 10:37:35 作者：兔子先生i
这篇文章主要为大家详细介绍了微信小程序实现图片放大预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
需求：当点击图片时，当前图片放大预览，且可以左右滑动
实现方式：使用微信小程序图片预览接口
我们可以看到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接口 里面即可
效果图片如下：可以左右滑动上一张下一张
更多内容可以查看：微信小程序教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-12-12
使用mock.js随机数据和使用express输出json接口的实现方法
这篇文章主要介绍了使用mock.js随机数据和使用express输出json接口的实现方法,需要的朋友可以参考下2018-01-01
Echarts中参数的配置功能很强大,对任何一项的配置都很细致,下面这篇文章主要给大家介绍了关于Echarts中常用的参数总结及参数自定义的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了js实现登录与注册界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
用js+cookie记录滚动条位置...2007-01-01
今天小编就为大家分享一篇在layui中select更改后生效的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最近在学习three.js，将学习中遇到的知识点总结分享出来，下面这篇文章主要给大家介绍了关于Three.js利用顶点绘制立方体的方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
关于JavaScript中的Delete一直没有弄的很清楚，最近看到两篇这方面的文章，现对两文中部分内容进行翻译(内容有修改和添加，顺序不完全一致，有兴趣推荐看原文)，希望能对大家有所帮助2012-09-09
本篇文章主要介绍了通过sails和阿里大于实现短信验证的方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
通用的javascript 换行色换列色的小js...2007-04-04
最新评论