大家在微信小程序的開(kāi)發(fā)過(guò)程中，肯定會(huì)經(jīng)常遇到一些圖片以及頁(yè)面刷新的問(wèn)題，所以今天我們給大家整理了下面幾個(gè)關(guān)于小程序圖片自適應(yīng)、本地圖片的使用、redirect到tab的不刷新問(wèn)題。
1、關(guān)于圖片自適應(yīng)
image標(biāo)簽中添加mode屬性：
默認(rèn)值：scaleToFill ---- 不保持縱橫比例縮放圖片，使圖片的寬高完全拉伸至填滿image標(biāo)簽
aspectFit ---- 保持縱橫比例縮放圖片，使圖片的長(zhǎng)邊能夠完全顯示出來(lái)，也就說(shuō)圖片可以完整的顯示出來(lái)
aspectFill ----- 保持縱橫比例縮放圖片，只保證圖片的短邊能夠完全顯示出來(lái)，也就是說(shuō)，圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截取
top ---- 不縮放圖片，只顯示圖片的頂部區(qū)域
bottom ---- 不縮放圖片，只顯示圖片的底部區(qū)域
center ---- 不縮放圖片，只顯示圖片的中間區(qū)域
left ---- 不縮放圖片,只顯示圖片的左邊區(qū)域
right ----- 不縮放圖片，只顯示圖片的右邊區(qū)域
top left ---- 不縮放圖片,只顯示圖片的左上邊區(qū)域
top right ---- 不縮放圖片,只顯示圖片的右上邊區(qū)域
bottom left ---- 不縮放圖片,只顯示圖片的左下邊區(qū)域
bottom right ---- 不縮放圖片,只顯示圖片的右下邊區(qū)域
2、關(guān)于圖片引用
在wxss頁(yè)面中不能引用本地的圖片
解決方案：
1、要是希望在wxss文件中使用背景圖，我們可以使用網(wǎng)絡(luò)圖片，或者base64位的圖片
2、通常情況下在CSS文件中我們是沒(méi)有辦法拿到后臺(tái)返回的域名，然后我們又希望可以使用一些本地的小圖標(biāo)之類的，我們可以在wxml中使用背景圖，直接在view的style中寫(xiě)樣式
例如：
3、在頁(yè)面中直接使用image標(biāo)簽，然后使用絕對(duì)定位
3、如何解決redirect到tab的不刷新問(wèn)題
小程序需要判斷用戶是否登錄，來(lái)顯示不同的內(nèi)容。當(dāng)?shù)卿浭Ш笮枰匦碌卿洸⑺⑿马?yè)面，一般我們用 redirect 或者 switchTab 方法進(jìn)行頁(yè)面間的跳轉(zhuǎn)，通過(guò)getCurrentPages() 拿到頁(yè)面棧（數(shù)組，最多五個(gè)），最后一個(gè)就是當(dāng)前頁(yè)面的路徑。
自然而然想到這樣來(lái)刷新當(dāng)前頁(yè)：
const reload= () => {
let curPage = getCurrentPages().pop().__route__;
wx.redirectTo({
url: '/' + curPage
})
}
這段代碼在小程序內(nèi)頁(yè)工作的很好，但一到tab頁(yè)就GG思密達(dá)了——并！不！會(huì)！刷！新！
下面的方法可以解決：
const reload= () => {
let curPage = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onShow();
}
愛(ài)盈利（aiyingli.com）移動(dòng)互聯(lián)網(wǎng)最具影響力的盈利指導(dǎo)網(wǎng)站。定位于服務(wù)移動(dòng)互聯(lián)網(wǎng)創(chuàng)業(yè)者，移動(dòng)盈利指導(dǎo)。我們的目標(biāo)是讓盈利目標(biāo)清晰可見(jiàn)！降低門(mén)檻，讓缺乏經(jīng)驗(yàn)、資金有限的個(gè)人和團(tuán)隊(duì)獲得經(jīng)驗(yàn)和機(jī)會(huì)，提高熱情，激發(fā)產(chǎn)品。
【轉(zhuǎn)載說(shuō)明】 若上述素材出現(xiàn)侵權(quán)，請(qǐng)及時(shí)聯(lián)系我們刪除及進(jìn)行處理：[email protected]
