百度智能小程序 預(yù)覽圖片

swan.previewImage

解釋： 預(yù)覽圖片。

方法參數(shù)

Object object

object參數(shù)說明

示例

圖片示例

代碼示例 1: 基本用法 

在開發(fā)者工具中打開

<view class="wrap">
    <view class="mode-title" style="margin-top:.2rem">
        <view class="mode-title-line-left"></view>
        <view class="mode-title-text">橫圖預(yù)覽</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">點(diǎn)擊圖片，預(yù)覽大圖</view>
    </view>
</view>

代碼示例 2: images 屬性 

在開發(fā)者工具中打開

<view class="wrap">
    <view class="mode-title" style="margin-top:.2rem">
        <view class="mode-title-line-left"></view>
        <view class="mode-title-text">縱圖預(yù)覽</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">點(diǎn)擊圖片，預(yù)覽大圖, 并可查看原圖</view>
    </view>
</view>

Bug & Tip

• 開發(fā)者工具 1.8.0 current 參數(shù)為當(dāng)前顯示圖片的索引值。不支持預(yù)覽本地文件。

參考示例

參考示例: images 屬性多個(gè) urls 的使用 

在開發(fā)者工具中打開

<view class="wrap">
    <view class="mode-title" style="margin-top:.2rem">
        <view class="mode-title-line-left"></view>
        <view class="mode-title-text">縱圖預(yù)覽</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">點(diǎn)擊圖片，預(yù)覽大圖, 并可查看原圖</view>
    </view>
</view>

錯(cuò)誤碼

Android

iOS