image-preview图片预览

更新时间：2023-06-19

image-preview 图片预览

一、属性说明

属性名	类型	默认值	必填	说明
class-name	String	无	否	组件类名
class-name-swiper-imgs	String	无	否	swiper 类名
class-name-swiper-item	String	无	否	swiper item类名
images	Array	无	是	图片链接
showPreview	Boolean	无	否	图片预览
voiceType	String	click	否	车载语音控件
voiceTag	String	关闭/关闭图片/关闭大图	否	车载语音注册文字
showMovableArea	Boolean	false	否	图片预览后是否需要双指放大

二、示例：

json:

{
    "navigationBarTitleText": "image-preview-图片查看",
    "usingComponents": {
        "iov-image-preview": "iov-ui/lib/image-preview"
    }
}

swan:

<view class="container">
    <view class="demo">
        <view>aspectFill {{showPreview}}</view>
        <iov-image
            voice-type="click"
            voice-tag="点击图片|查看图片|查看大图"
            bindtap="handleImage"
            mode="aspectFill"
            width="30vh"
            height="30vh"
            lazyLoad="{{ true }}"
            src="{{ imgUrl }}"
        ></iov-image>
    </view>
    <iov-image-preview
        showPreview="{{ showPreview }}"
        images="{{ images }}"
        bindclose="handelClose"
        bindswiperChange="swiperChange"
    ></iov-image-preview>
</view>

js:

Page({
    data: {
        imgUrl: 'https://img.yzcdn.cn/vant/cat.jpeg',
        showPreview: false,
        images: [{"type":"1","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0200l1200099onz9l7D43_R_550_412.jpg","caption":"\u5916\u89c2"},{"type":"1","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/020211200099oo7a56486_R_550_412.jpg","caption":"\u5916\u89c2"},{"type":"1","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/020481200099oo7rmE9CF_R_550_412.jpg","caption":"\u5916\u89c2"},{"type":"2","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0206x1200099oofrxCF0F_R_550_412.jpg","caption":"\u516c\u5171\u533a\u57df"},{"type":"2","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0201c1200099ooj3n23FE_R_550_412.jpg","caption":"\u516c\u5171\u533a\u57df"},{"type":"2","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0201l1200099oonqy21DA_R_550_412.jpg","caption":"\u516c\u5171\u533a\u57df"},{"type":"2","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0203f1200099oo4gm0E8F_R_550_412.jpg","caption":"\u516c\u5171\u533a\u57df"},{"type":"2","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/020101200099ooi6kB7F4_R_550_412.jpg","caption":"\u516c\u5171\u533a\u57df"},{"type":"2","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/020331200099ookkd0211_R_550_412.jpg","caption":"\u516c\u5171\u533a\u57df"},{"type":"2","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0204c1200099oonrp2095_R_550_412.jpg","caption":"\u516c\u5171\u533a\u57df"},{"type":"2","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/020701200099oo4gy951B_R_550_412.jpg","caption":"\u516c\u5171\u533a\u57df"},{"type":"2","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/020051200099oor444FDB_R_550_412.jpg","caption":"\u516c\u5171\u533a\u57df"},{"type":"2","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0205c1200099oobhl656E_R_550_412.jpg","caption":"\u516c\u5171\u533a\u57df"},{"type":"3","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0203y1200099opleq8058_R_550_412.jpg","caption":"\u5065\u8eab\u5a31\u4e50\u8bbe\u65bd"},{"type":"3","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0206j1200099oq0o8B55D_R_550_412.jpg","caption":"\u5065\u8eab\u5a31\u4e50\u8bbe\u65bd"},{"type":"3","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0202y1200099opt068975_R_550_412.jpg","caption":"\u5065\u8eab\u5a31\u4e50\u8bbe\u65bd"},{"type":"3","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/020711200099opzqb7D3B_R_550_412.jpg","caption":"\u5065\u8eab\u5a31\u4e50\u8bbe\u65bd"},{"type":"3","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0202t1200099oq23nCBBD_R_550_412.jpg","caption":"\u5065\u8eab\u5a31\u4e50\u8bbe\u65bd"},{"type":"3","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0206m1200099oq4dy43F4_R_550_412.jpg","caption":"\u5065\u8eab\u5a31\u4e50\u8bbe\u65bd"},{"type":"5","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0203z120009793kba1413_R_550_412.jpg","caption":"\u5176\u4ed6"},{"type":"5","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0201k120009793i6h0DEE_R_550_412.jpg","caption":"\u5176\u4ed6"},{"type":"1","url":"http:\/\/dimg04.c-ctrip.com\/images\/\/0200l1200099onz9l7D43_R_550_412.jpg","caption":"Logo"}]
    },
    handleImage: function () {
        this.setData({showPreview: true});
    },
    handelClose: function (e) {
        console.log(' > handelClose', e);
        this.setData({showPreview: false});
    },
    swiperChange: function (e) {
        console.log(' > swiperChange', e);
    }
})

image 图片 layout-con 自适应双容器