微信小程序圖片放大預(yù)覽效果的實(shí)現(xiàn)
2021-08-08 12:46:34

近期很多剛學(xué)習(xí)小程序的同學(xué)，想做哪種圖片點(diǎn)擊放大，然后可以左右滑動(dòng)預(yù)覽的效果。我也特意去研究下，發(fā)現(xiàn)直接用微信程序自己的api就可以很方便的實(shí)現(xiàn)。今天就來教大家如何實(shí)現(xiàn)小程序圖片點(diǎn)擊放大的效果。

老規(guī)矩，先看效果圖

效果圖有點(diǎn)快，但是可以大致看出來效果了。我再給大家描述下吧
一個(gè)頁(yè)面有3張圖片，點(diǎn)擊其中任意一張都可以放大預(yù)覽。然后在預(yù)覽的時(shí)候，左右滑動(dòng)，還可以看另外兩張圖片。

話不多說，直接上代碼

1，首先定義一個(gè)頁(yè)面image.wxml

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

這個(gè)頁(yè)面很簡(jiǎn)單，就是放三個(gè)image用來顯示imgList數(shù)組里的三張圖片。

2，實(shí)現(xiàn)圖片放大效果的核心方法如下。

上圖是官方的示例。我們來看下實(shí)際中是如何使用的。

3，把image.js的完整代碼貼出來。

Page({
  data: {
    imgList: [
      "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,2848974022&fm=26&gp=0.jpg",
      "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3139953554,3011511497&fm=26&gp=0.jpg",
      "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1022109268,3759531978&fm=26&gp=0.jpg"
    ]
  },

  //預(yù)覽圖片，放大預(yù)覽
  preview(event) {
    console.log(event.currentTarget.dataset.src)
    let currentUrl = event.currentTarget.dataset.src
    wx.previewImage({
      current: currentUrl, // 當(dāng)前顯示圖片的http鏈接
      urls: this.data.imgList // 需要預(yù)覽的圖片http鏈接列表
    })
  }
})

這里也很簡(jiǎn)單，就是定義一個(gè)imgList圖片數(shù)組。然后定義一個(gè)方法，在點(diǎn)擊圖片時(shí)實(shí)現(xiàn)圖片放大預(yù)覽的效果。
其實(shí)代碼就這么多，我們就可以輕松的實(shí)現(xiàn)小程序圖片的點(diǎn)擊放大效果了。
是不是很簡(jiǎn)單。