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

2020-09-08 16:10 更新

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

使用说明

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

使用指南

安装

在 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
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号