中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频

以下將展示微信小程序之媒體組件image源碼官方組件能力，組件樣式僅供參考，開(kāi)發(fā)者可根據(jù)自身需求定義組件樣式，具體屬性參數(shù)詳見(jiàn)小程序開(kāi)發(fā)文檔。

功能描述：

圖片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

屬性說(shuō)明：

Skyline僅列出與 WebView 屬性的差異，未列出的屬性與 WebView 一致。

Skyline

組件差異

1. 使用 svg 格式且 mode=scaleToFill 時(shí)，WebView 會(huì)居中（除非 svg 里加上preserveAspectRatio="none"），Skyline 則會(huì)撐滿

2. svg 格式不支持百分比單位

3. svg 格式不支持<style> element

支持長(zhǎng)按識(shí)別的碼

Bug & Tip

1.tip：image組件默認(rèn)寬度320px、高度240px

2.tip：image組件中二維碼/小程序碼圖片不支持長(zhǎng)按識(shí)別。僅在 wx.previewImage 中支持長(zhǎng)按識(shí)別

3.tip：image組件進(jìn)行縮放時(shí)，計(jì)算出來(lái)的寬高可能帶有小數(shù)，在不同 webview 內(nèi)核下渲染可能會(huì)被抹去小數(shù)部分

示例代碼

JAVASCRIPT

Page({

  data: {

    array: [{

      mode: 'scaleToFill',

      text: 'scaleToFill：不保持縱橫比縮放圖片，使圖片完全適應(yīng)'

    }, {

      mode: 'aspectFit',

      text: 'aspectFit：保持縱橫比縮放圖片，使圖片的長(zhǎng)邊能完全顯示出來(lái)'

    }, {

      mode: 'aspectFill',

      text: 'aspectFill：保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來(lái)'

    }, {

      mode: 'top',

      text: 'top：不縮放圖片，只顯示圖片的頂部區(qū)域'

    }, {

      mode: 'bottom',

      text: 'bottom：不縮放圖片，只顯示圖片的底部區(qū)域'

    }, {

      mode: 'center',

      text: 'center：不縮放圖片，只顯示圖片的中間區(qū)域'

    }, {

      mode: 'left',

      text: 'left：不縮放圖片，只顯示圖片的左邊區(qū)域'

    }, {

      mode: 'right',

      text: 'right：不縮放圖片，只顯示圖片的右邊邊區(qū)域'

    }, {

      mode: 'top left',

      text: 'top left：不縮放圖片，只顯示圖片的左上邊區(qū)域'

    }, {

      mode: 'top right',

      text: 'top right：不縮放圖片，只顯示圖片的右上邊區(qū)域'

    }, {

      mode: 'bottom left',

      text: 'bottom left：不縮放圖片，只顯示圖片的左下邊區(qū)域'

    }, {

      mode: 'bottom right',

      text: 'bottom right：不縮放圖片，只顯示圖片的右下邊區(qū)域'

    }],

    src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'

  },

  imageError: function(e) {

    console.log('image3發(fā)生error事件，攜帶值為', e.detail.errMsg)

  }

})

WXML

<view class="page">

  <view class="page__hd">

    <text class="page__title">image</text>

    <text class="page__desc">圖片</text>

  </view>

  <view class="page__bd">

    <view class="section section_gap" wx:for="{{array}}" wx:for-item="item">

      <view class="section__title">{{item.text}}</view>

      <view class="section__ctn">

        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>

      </view>

    </view>

  </view>

</view>

原圖

版權(quán)聲明： 本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳，如涉及版權(quán)問(wèn)題，請(qǐng)聯(lián)系我們第一時(shí)間處理。

原文鏈接地址：https://developers.weixin.qq.com/miniprogram/dev/component/image.html