微信小程序图片点击放大缩小（微信小程序摸索第十一天）

最新推荐文章于 2025-06-16 06:57:25 发布

程婿缘

最新推荐文章于 2025-06-16 06:57:25 发布

阅读量1.3k

点赞数 1

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/Proceduralmargin/article/details/107926105

版权

小程序专栏收录该内容

4 篇文章

订阅专栏

今天写一个点击图片放大的例子！

先看一下效果

点击前

点击后

注意了代码来了！！！！

.wxml

<view  class="tu1.img1">
  <!-- src是图片数据 -->
  <image class='tu1.img' src='{{imgUrl}}' bindtap='clickImg'></image>
</view>

.mxss

.tu1.img{
  border-radius: 20rpx;
  width: 90%;
  height: 180px;
}
.tu1.img1{
  display:flex;
  justify-content: center; 
}

.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrl:'https://7869-xiaoyou-1302517446.tcb.qcloud.la/assetes/fuwu/11.jpg?sign=0bb7691af3bcab5a500f3f4203a88815&t=1596992718',  //图片路径(http链接)
  },
 

 //点击事件  
  clickImg: function(e){
    var imgUrl = this.data.imgUrl;
    wx.previewImage({
      urls: [imgUrl], //需要预览的图片http链接列表，注意是数组
      success: function (res) { },
      fail: function (res) { },
      complete: function (res) { },
    })
  },

路过的朋友点个赞！！谢谢！！