微信小程序图片放大预览效果的实现
生活随笔
收集整理的這篇文章主要介紹了
微信小程序图片放大预览效果的实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果預覽
效果圖有點快,但是可以大致看出來效果了。我再給大家描述下吧
一個頁面有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.srcwx.previewImage({current: currentUrl, // 當前顯示圖片的http鏈接urls: this.data.imgList // 需要預覽的圖片http鏈接列表})} })這里也很簡單,就是定義一個imgList圖片數組。然后定義一個方法,在點擊圖片時實現圖片放大預覽的效果。
其實代碼就這么多,我們就可以輕松的實現小程序圖片的點擊放大效果了。
是不是很簡單。
總結
以上是生活随笔為你收集整理的微信小程序图片放大预览效果的实现的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 微信小程序自定义select下拉选项框
- 下一篇: 微信小程序canvas绘制环形图(含动画