微信小程序实现预览图片功能
更新时间：2020年10月22日 10:46:55 作者：进阶的码农
这篇文章主要为大家详细介绍了微信小程序实现预览图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现预览图片的具体代码，供大家参考，具体内容如下
先看下效果图：
这种效果在一些商城类的小程序里是很常见的一种功能，实现起来也很简单
下面我们来看一下代码：
我的这些图片资源是从后台拿到的，你们看一下具体的需求，一般都是后台返回，毕竟小程序是有大小限制的。
<view class='contentbot'>
<view class='contentWa' wx:key='id' wx:for='{{wawa}}'>
<image src='{{item.img_url}}' mode='widthFix' data-src='{{item.img_url}}' bindtap='previewImage'></image>
<text class='waName'>{{item.name}}</text>
</view>
</view>
CSS:
.contentWa {
margin-top: 20rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.contentWa image {
margin: 0;
padding: 0;
width: 100%;
}
.getWa{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.waName {
width: 100%;
height: 80rpx;
line-height: 80rpx;
font-size: 30rpx;
text-align: center;
background: #fff;
display: inline-block;
}
JS:
//预览图片
previewImage: function (e) {
var current = e.target.dataset.src;
var imgList = [];
for (let i = 0; i < this.data.wawa.length; i++) {
imgList.push(this.data.wawa[i].img_url);
}
wx.previewImage({
current: current,//当前点击的图片链接
urls: imgList//图片数组
})
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
科讯商业版中用到的ajax空间与分页函数...2007-09-09
javascript 利用Image对象实现的埋点(某处的点击数)统计
统计用户页面某处的点击数或者执行到程序中某个点的次数;根据实际情况，创建多个Image对象，原则谁空闲谁做事，解下来详细介绍，需要了解的朋友可以参考下2012-12-12
这篇文章主要为大家详细介绍了JavaScript中实现两个跨域页面进行跳转传参的方案,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
这篇文章主要为大家详细介绍了JavaScript canvas实现雪花随机动态飘落，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
使用CoffeeScrip优美方式编写javascript代码
CoffeeScript就是JavaScript，他进行的是一对一的编译，或者说是翻译，而且编译成的JavaScript代码可读性很强。本文给大家介绍使用CoffeeScript优美方式编写javascript代码，感兴趣的朋友一起看看吧2015-10-10
让光标默认停留在INPUT框中，用focus方法可以实现，下面有个示例代码，需要的朋友可以参考下2014-07-07
这篇文章主要为大家详细介绍了JS组件Bootstrap导航条的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
这篇文章主要介绍了基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
下面小编就为大家带来一篇js 获取经纬度的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了JavaScript中DOM和BOM原理详析，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
最新评论