支付宝小程序 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 | 否 |