久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      微信小程序中圖片處理(居中、鋪滿屏幕)

      圖片顯示是小程序設(shè)計必須要經(jīng)過的步驟,本人看到網(wǎng)上教學(xué)有限,現(xiàn)整理出自己設(shè)計過程中出現(xiàn)的問題,應(yīng)該可以解決你遇到的問題。

      用最后給的完整代碼,按照我的步驟一定能調(diào)試出來,不行再聯(lián)系我。

      先給用到的代碼以及效果圖:

      先給home.wxml程序:

      <view class='imagesize'>   <image src="/images/2.png" class='in-image'   >   </image> </view>

      1.圖片居中(屏幕頂部):

      //.wxss里的參數(shù) .imagesize{  display:flex;                    //flex布局  justify-content: center;         //水平軸線居中 } .imagesize image {    width:400rpx;   height:400rpx; }

      微信小程序中圖片處理(居中、鋪滿屏幕)

      上面設(shè)置的圖片尺寸,僅僅是為了方便看到實際的效果。

      2.圖片居中(中部,位置可調(diào) →height 和 align-items)

      .imagesize{  display:flex;  height: 600px;                    //flex布局高度  justify-content: center;          align-items:center;                //垂直居中   } .imagesize image {    width:400rpx;   height:400rpx; }

      微信小程序中圖片處理(居中、鋪滿屏幕)

      上圖的height值分別為: 200px 400px 600px

      前兩種都不適用全部型號手機,因為手機屏幕尺寸不固定。

      但是,對于設(shè)計圖片位置很有幫助。

      3.圖片居中(屏幕正中間)

      代碼:

      page{    height:100%                        //滿屏設(shè)置 } .imagesize{  display:flex;  height: 100%;                        //設(shè)置布局滿屏  justify-content: center;  align-items:center;   } .imagesize image {    width:400rpx;   height:400rpx; }

      看效果:

      微信小程序中圖片處理(居中、鋪滿屏幕)

      4.給出完整代碼(之前的一篇也有完整代碼,現(xiàn)給出的加到之前的文件夾下就行):

      home.wxml

      <view class='imagesize'>   <image src="/images/2.png" class='in-image'   >   </image> </view>

      home.wxss

      page{    height:100% } .imagesize{  display:flex;  height: 100%;  justify-content: center;  align-items:center;   } .imagesize image {    width:400rpx;   height:400rpx; }

      5.鋪滿屏幕:

      單獨講鋪滿屏幕,主要用到mode='widthFix'

      具體加在的程序段是.wxml:

      <image src="/images/img21.jpg" class='in-image' mode='widthFix'> </image>

      以及.wxss的改變:

      page{ height:100% } .imagesize{ display:flex; height: 100%; justify-content: center; align-items:center; }

      換了一張圖做演示:

      微信小程序中圖片處理(居中、鋪滿屏幕)

      看看不加widthFix的效果圖:

      微信小程序中圖片處理(居中、鋪滿屏幕)

      所以還是很有用的。

      這里由于是底部tab窗口,所以沒有顯示完整屏幕覆蓋的圖。

      可以設(shè)計啟動畫面,當(dāng)然截取合適比例的圖會影響實際顯示效果,還有就是背景顏色與圖片顏色的不同需要你調(diào)試時候注意一下。

      推薦教程:《微信小程序》

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號