用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

微信小程序圖片放大預覽效果的實現

Rolan 2019-8-30 00:12

近期很多剛學習小程序的同學,想做哪種圖片點擊放大,然后可以左右滑動預覽的效果。我也特意去研究下,發現直接用微信程序自己的api就可以很方便的實現。今天就來教大家如何實現小程序圖片點擊放大的效果。老規矩, ...

近期很多剛學習小程序的同學,想做哪種圖片點擊放大,然后可以左右滑動預覽的效果。我也特意去研究下,發現直接用微信程序自己的api就可以很方便的實現。今天就來教大家如何實現小程序圖片點擊放大的效果。

老規矩,先看效果圖


效果圖有點快,但是可以大致看出來效果了。我再給大家描述下吧
一個頁面有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數組里的三張圖片。

2,實現圖片放大效果的核心方法如下。


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

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"
    ]
  },

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

這里也很簡單,就是定義一個imgList圖片數組。然后定義一個方法,在點擊圖片時實現圖片放大預覽的效果。
其實代碼就這么多,我們就可以輕松的實現小程序圖片的點擊放大效果了。
是不是很簡單。
我也有錄制視頻講解:https://edu.csdn.net/course/detail/25749

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 編程小石頭 來自: 簡書
不朽的浪漫援彩金
600309股票行 哈哈湖南麻将安卓版 燕赵风彩20选走势图 网络赚 论坛 河北11选5开奖结果走势 福建麻将多少张牌 本期深圳风采开奖时间 捷报比分手机版ios 跟跌不跟涨的股票 澳洲幸运10靠谱群 众赢鑫配资 哈尔滨麻将游戏下载 网络小说如何赚钱 一起温州麻将台炮灵溪 福建11选5直播 浙江11元选5开奖