codecamp

支付宝小程序 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
支付宝小程序 UI·景区导航
支付宝小程序 UI·选项卡
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }