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

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

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

話不多說，直接上代碼

一，實(shí)現(xiàn)多張圖片點(diǎn)擊放大效果

1-1，首先定義一個(gè)頁面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è)頁面很簡單，就是放三個(gè)image用來顯示imgList數(shù)組里的三張圖片。

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

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

1-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鏈接列表 ? ?}) ?} })

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

二，輪播圖點(diǎn)擊放大預(yù)覽

其實(shí)我們的輪播圖也是可以實(shí)現(xiàn)點(diǎn)擊放大的。

2-1，效果圖

首先時(shí)輪播圖如下

可以看出我們有三張輪播圖，點(diǎn)擊放大后的效果

2-2，wxml頁面代碼

<swiper indicator-dots> ?<swiper-item wx:for="{{imgList}}" bindtap="preview" data-index="{{index}}"> ? ?<image src="{{item}}"></image> ?</swiper-item> </swiper>

其實(shí)就是一個(gè)輪播圖的實(shí)現(xiàn)，外加一個(gè)點(diǎn)擊事件

2-3，js代碼的實(shí)現(xiàn)

其實(shí)和我們上面多圖片實(shí)現(xiàn)的代碼一樣

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) { ? ?let index = event.currentTarget.dataset.index ? ?wx.previewImage({ ? ? ?current: this.data.imgList[index], // 當(dāng)前顯示圖片的http鏈接 ? ? ?urls: this.data.imgList // 需要預(yù)覽的圖片http鏈接列表 ? ?}) ?} })

到這里我們就完整的實(shí)現(xiàn)了圖片點(diǎn)擊放大的效果了，是不是很簡單。