微信小程序实现弹窗预览图片

梦里梦外; 2022-05-28 10:59 731阅读 0赞

今天要实现,点击实现预览图片的功能,看了网上的解决方案,都不太满意,于是自己写了一个.用到了zan-ui的弹窗样式,要引入zan-ui的框架,不会的话,可以看这篇文章

[微信小程序之第三方UI框架 zanui 使用教程][UI_ zanui]

有一个商品

![70][]

点击图片

![70 1][]

一个弹窗的效果实现预览图片

wxml代码

首先是图片的代码

弹窗代码

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;
    }

/**   
     * 预览图片  
     */
    togglePopup: function (event) {
        var image_path = event.currentTarget.dataset.id;      
        this.setData({
            url: image_path,
            showPopup: !this.data.showPopup
          });
        },

注意事项:url要在Page data里面定义一下

继续加油写,有问题可以评论或私信我

[UI_ zanui]: https://blog.csdn.net/weixin_40099554/article/details/79735778
[70]: /images/20220528/298a9ee485e841d8b04c84dc2d901274.png
[70 1]: /images/20220528/752b4a43652f4dfc9871fe210137d73b.png