支付宝小程序 UI·图片放大

本示例为图片放大快速示例，实现了缩略图片点击放大的功能，可应用于有商品详情照片点击放大、相册图片预览与放大等场景。

使用说明

• 本示例为纯客户端代码，可直接在模拟器和在真机预览。
• 更多详情请参见 代码市场。

使用指南

安装

在 IDE 安装以下依赖

npm i mashi-open-snippets --save

注册

在 JSON 中引入组件路径

{


  "usingComponents": {


    "enlarge-image": "mashi-open-snippets/es/enlarge-image/index"


  }


}

调用

分别在 AXML、JS、ACSS 中输入以下代码

.atd-enlargeimage .page-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

<view class="page atd-enlargeimage">
  <view class="page-description">点击图片放大预览  
  </view>
  <view class="page-section">
    <enlarge-image url="http://pic1.win4000.com/wallpaper/2018-06-08/5b1a46b515a87.jpg" width="400"/>
  </view>
</view>

Page({
  data: {},
  onLoad() {}
});

属性

属性	描述	类型	默认值	必填
url	图片的地址。	String	-	是
width	预览前图片的宽度。	String	400	否