首頁 > 文章 > 微信小程式 > 微信小程式使用image元件顯示圖片的方法

微信小程式使用image元件顯示圖片的方法

小云云原創: 2018-05-09 22:10:3051709瀏覽

本文主要介紹了微信小程式使用image元件顯示圖片的方法,結合實例形式簡單分析了微信小程式附image元件的相關使用技巧,並附帶源碼供讀者下載參考,需要的朋友可以參考下，希望能幫助大家。

可以看到，image這個元件有四個屬性，這次針對mode屬性和我所做的小程式中用到的圖片結合講一下。

依照官方的mode，分為兩類：一類縮放，一類裁切。

我所做的pixiv是需要大量圖片的網站。 P站供畫手們上傳自己的作品。圖片有大有小，按照這個，我們要做的可以分成兩種

1、對上傳上來的圖片進行縮放（一般是縮小），放進我們規定好大小的格子中。

2、對上傳上來的圖片進行裁剪，假設我們只需要整張圖片的中間部分就可以了。

因為上述的這兩點還要針對小程式中的view元件和scroll-view元件區分，這個涉及到了對image的width的設定，現在先講最普通的view元件。（對於scroll-view中出現的圖片，也會出現滾動軸的情況，鏈接在此：scroll-view中，image組件出現滾軸）

如圖，現在我有一張這麼大的圖片，我只要放進這麼小的格子裡面。（看紅色框）

微信小程式使用image元件顯示圖片的方法

依照分類點，我們來講第一點（縮放）我做的時候出現的問題。

（看下圖）這個小格子並沒有規定大小，它是一個weui-flex__item，也就是flex:1（這裡就是佔據了整個橫斷面的50%）。對於image這個元件本身，我設定了width:100%（待會來看看如果把這個100% 去掉會怎樣）。對於我們要調整的這張圖片，首先我們明確了是縮放，也就是從scaleToFill、aspectFit、aspectFill、widthFix這四個值取。以下就是四種對應顯示的樣子（看圖）。

乍一看，scaleToFill和aspectFill就是我們要用的，但是感覺好像scaleToFill和aspectFill沒有差別，展示的效果都是一樣的。這就得說回我們剛才說的，有沒有給image組件設定了width:100%的問題，以下就針對有無100%來區分。

1、有設定image的width:100%

一開始我做的時候，是沒有給圖片設定width為100%的，於是出現了滾動軸，還特別奇怪。調試一看，原來是圖片原本的320px的寬度已經超出了格子的寬度，並且image組件自己已經設定好overflow:hidden（如圖，沒有設置width為100%的時候image的width）

1、效果展示

#2、關鍵程式碼

#① index.wxml

<image style="width: 300px; height: 300px; margin:10px;" mode="scaleToFill" src="{{imageSrc}}"></image>

② index.js

Page({
 data:{
 // text:"这是一个页面"
 imageSrc:&#39;../../pages/image/img.jpg&#39;
 }
})

結論就是：使用aspectFill或scaleToFill最好還是給image的width設定為100%，就不會在圖片下方出現橫捲動軸啦

微信小程式使用image元件顯示圖片的方法

相關文章