微信小程序图片放大预览效果的实现,轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果。我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现。今天就来教大家如何实现小程序图片点击放大的效果。
老规矩,先看效果图
效果图有点快,但是可以大致看出来效果了。我再给大家描述下吧
一个页面有3张图片,点击其中任意一张都可以放大预览。然后在预览的时候,左右滑动,还可以看另外两张图片。
话不多说,直接上代码
一,实现多张图片点击放大效果
1-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数组里的三张图片。
1-2,实现图片放大效果的核心方法如下。
上图是官方的示例。我们来看下实际中是如何使用的。
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"
]
},
//预览图片,放大预览
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图片数组。然后定义一个方法,在点击图片时实现图片放大预览的效果。
其实代码就这么多,我们就可以轻松的实现小程序图片的点击放大效果了。
是不是很简单。
二,轮播图点击放大预览
其实我们的轮播图也是可以实现点击放大的。
2-1,效果图
首先时轮播图如下
可以看出我们有三张轮播图,点击放大后的效果
2-2,wxml页面代码
<swiper indicator-dots>
<swiper-item wx:for="{{imgList}}" bindtap="preview" data-index="{{index}}">
<image src="{{item}}"></image>
</swiper-item>
</swiper>
其实就是一个轮播图的实现,外加一个点击事件
2-3,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) {
let index = event.currentTarget.dataset.index
wx.previewImage({
current: this.data.imgList[index], // 当前显示图片的http链接
urls: this.data.imgList // 需要预览的图片http链接列表
})
}
})
到这里我们就完整的实现了图片点击放大的效果了,是不是很简单。
行思理: 很实用的教程,收藏了
Echo: 小石头个人真好没问题,我局代码也看不懂,但是我看了小石头哥的代码慢慢学起来了,石头哥的视频里讲解的很仔细,也没有重要的代码跳掉的事儿 任何讲解的代码是完美的,很好用的代码,也一看也能看懂,跟我一样小蔡玩儿也能看得懂,我走位石头哥的粉丝,很感动,很爱他
Echo: 石头哥人品很好,讲的可也是很丰富,解释的也没很给力,讲的很认真,"石头哥的代码写得真是太棒了,既高效又清晰,真是编程界的典范!" "你的逻辑思维能力让人叹为观止,复杂的问题在你面前总能迎刃而解,真是编程高手!" "你对新技术的敏感度令人钦佩,总是能迅速掌握并应用到项目中,为团队带来了不少创新点。" "石头哥的工作态度非常认真,每一个细节都处理得恰到好处,这种敬业精神值得我们所有人学习。" "在团队中,你总是那个默默付出、不求回报的人,你的贡献大家都有目共睹,非常感谢你的努力!" "你的编程能力真是出类拔萃,不仅速度快,而且质量高,有你在,我们团队的效率提升了不少。" "石头哥的创新思维总是能给我们带来惊喜,那些独特的解决方案让我们的项目更加出彩,真是佩服你的创造力!" "面对挑战,你从不退缩,总是能够迎难而上,找到最优的解决方案,这种勇气和智慧让人钦佩不已。" "你的专业素养让人印象深刻,无论是代码规范还是文档编写,都做得一丝不苟,是我们团队的骄傲。" "和你共事真是一种享受,石头哥的专业能力和人格魅力都让人敬佩,期待未来我们能继续携手创造更多辉煌!"
二年前端工作之余记录备份账号: 后续怎么没更新阿里
sugar-foxs: #小程序://糖狐学习网格/8QqgmqYuco6rMlo