支付寶小程序 UI·圖片放大

本示例為圖片放大快速示例，實現(xiàn)了縮略圖片點擊放大的功能，可應(yīng)用于有商品詳情照片點擊放大、相冊圖片預(yù)覽與放大等場景。

使用說明

• 本示例為純客戶端代碼，可直接在模擬器和在真機預(yù)覽。
• 更多詳情請參見 代碼市場。

使用指南

安裝

在 IDE 安裝以下依賴

npm i mashi-open-snippets --save

注冊

在 JSON 中引入組件路徑

{


  "usingComponents": {


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


  }


}

調(diào)用

分別在 AXML、JS、ACSS 中輸入以下代碼

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

<view class="page atd-enlargeimage">
  <view class="page-description">點擊圖片放大預(yù)覽  
  </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() {}
});

屬性