• swan.previewImage
  • 方法参数
    • object 参数说明
  • 示例
    • 图片示例
    • 代码示例 1：基本用法
    • 代码示例 2：images 属性
    • 代码示例 3：images 属性多个 urls 的使用
  • Bug & Tip
  • 错误码
    • Android
    • iOS

swan.previewImage

解释： 预览图片。

方法参数

Object object

object 参数说明

示例

扫码体验

代码示例

请使用百度APP扫码

图片示例

代码示例 1：基本用法

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 


  
<view class="wrap">

  
 <view class="mode-title" style="margin-top:.2rem">

  
 <view class="mode-title-line-left"></view>

  
 <view class="mode-title-text">横图预览</view>

  
 <view class="mode-title-line-right"></view>

  
 </view>

  
 <view class="card-area">

  
 <image src="{{image1}}" mode="widthFix" bindtap="previewImage">

  
 </image>

  
 <view class="tip-week">点击图片，预览大图</view>

  
 </view>

  
</view>

 

代码示例 2：images 属性

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 


  
<view class="wrap">

  
 <view class="mode-title" style="margin-top:.2rem">

  
 <view class="mode-title-line-left"></view>

  
 <view class="mode-title-text">纵图预览</view>

  
 <view class="mode-title-line-right"></view>

  
 </view>

  
 <view class="card-area">

  
 <view class="bg">

  
 <image src="{{image2}}" mode="aspectFit" bindtap="previewOriginImage"></image>

  
 </view>

  
 <view class="tip-week">点击图片，预览大图, 并可查看原图</view>

  
 </view>

  
</view>

 

代码示例 3：images 属性多个 urls 的使用

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 


  
<view class="wrap">

  
 <view class="mode-title" style="margin-top:.2rem">

  
 <view class="mode-title-line-left"></view>

  
 <view class="mode-title-text">纵图预览</view>

  
 <view class="mode-title-line-right"></view>

  
 </view>

  
 <view class="card-area">

  
 <view class="bg">

  
 <image src="{{image2}}" mode="aspectFit" bindtap="previewOriginImage"></image>

  
 </view>

  
 <view class="tip-week">点击图片，预览大图, 并可查看原图</view>

  
 </view>

  
</view>

 

Bug & Tip

• Tip：开发者工具 1.8.0 current 参数为当前显示图片的索引值。
• Tip：不支持预览本地文件。

错误码

Android

iOS