小程序图片预览

最新推荐文章于 2021-08-17 10:24:46 发布

三为科技

最新推荐文章于 2021-08-17 10:24:46 发布

阅读量403

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/Fohnny/article/details/109340423

版权

本文介绍了如何在小程序中实现图片预览功能。通过定义image.wxml页面展示3张图片，利用核心方法实现图片点击放大，并能左右滑动查看其他图片。提供了image.js的完整代码，展示了一个简单的图片预览功能的实现过程。

摘要由CSDN通过智能技术生成

一个页面有3张图片，点击其中任意一张都可以放大预览。然后在预览的时候，左右滑动，还可以看另外两张图片。

话不多说，直接上代码

1，首先定义一个页面image.wxml

<!--pages/image/image.wxml-->
<image src="{
  {imgList[0]}}" bindtap="preview" data-src="{
  {imgList[0]}}"></image>
<image src="{
  {imgList[1]}}" bindtap="preview" data-src="{
  {imgList[1]}}"></image>
<image src="{
  {imgList[2]}}" bindtap="preview" data-src="{
  {imgList[2]}}"></image>

这个页面很简单，就是放三个image用来显示imgList数组里的三张图片。