今天写一个点击图片放大的例子!
先看一下效果
点击前
点击后
注意了代码来了!!!!
.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) { },
})
},
路过的朋友点个赞!!谢谢!!