|
今天要实现,点击实现预览图片的功能,看了网上的解决方案,都不太满意,于是自己写了一个.用到了zan-ui的弹窗样式,要引入zan-ui的框架,不会的话,可以看这篇文章 微信小程序之第三方UI框架 zanui 使用教程
有一个商品 
点击图片 
一个弹窗的效果实现预览图片
wxml代码 首先是图片的代码 <image src="{{image_path}}" style="width: 57px;height: 57px" data-id="{{image_path}}" bindtap="togglePopup"></image>
弹窗代码 <view class="zan-popup {{ showPopup ? 'zan-popup--show' : ''}}">
<view class="zan-popup__mask" bindtap="togglePopup"></view>
<view class="zan-popup__container popup-example--center">
<view class="zan-btns">
<image src='{{url}}'></image>
</view>
</view>
</view>
wxss /* 弹窗层 */
.popup-example--center {
border-radius: 4px;
}
.popup-example--right .zan-popup__container {
top: 0;
bottom: 0;
}
.popup-example--left .zan-popup__container {
top: 0;
bottom: 0;
}
.popup-example--top .zan-popup__container {
left: 0;
right: 0;
padding: 15px;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 16px;
}
.popup-example--top .zan-popup__mask {
opacity: 0;
}
.popup-example--bottom .zan-popup__container {
left: 0;
right: 0;
}
js /**
* 预览图片
*/
togglePopup: function (event) {
var image_path = event.currentTarget.dataset.id;
this.setData({
url: image_path,
showPopup: !this.data.showPopup
});
},
注意事项:url要在Page data里面定义一下 继续加油写,有问题可以评论或私信我 | 
转播
