原生組件顯示在遮罩層上面的問題
在小程序中使用原生的表單組件時(shí)，在有彈出框出現(xiàn)的情況下，原生表單組件會(huì)出現(xiàn)在遮罩層上面，且會(huì)造成事件穿透的情況。
解決方案一：
使用cover-view，cover-view比原生組件的層級(jí)更高，或者說也是一種原生組件，不過在cover-view的子組件只能是coveri-view、cover-image，對(duì)于包含其他組件的彈框并不適用。
解決方案二：
使用page-container，page-container會(huì)彈出一個(gè)容器，可以承載任意組件。page-container原本是用來實(shí)現(xiàn)子頁(yè)面的，不過用于實(shí)現(xiàn)彈框也是可以的。
由于是原本是用來顯示子頁(yè)面的所以在點(diǎn)擊返回時(shí)可能會(huì)出現(xiàn)需要點(diǎn)擊兩次才會(huì)回退到上一個(gè)頁(yè)面的情況，因此，需要自己手動(dòng)回退一次。
至于事件穿透問題，在遮罩層上使用catch綁定tap、touchmove等事件阻止事件冒泡即可。
scroll-view高度適配問題
布局情況：
scroll-view的上面和下面的高度是固定的，scroll-view與下面部分之間有間隔，要在不同的機(jī)型下顯示相同的間隔
-
js解決
使用windowHeight，減去固定部分的高度，剩余的高度為scroll-view的高度。固定部分的高度使用樣式中的大小乘以不同機(jī)型的rpx的比率得到響應(yīng)的px大小。 -
css
scroll-view的父元素設(shè)置為flex，absolute定位，設(shè)置top、bottom、left、right讓父元素占據(jù)頁(yè)面的剩余空間。底部元素也包含進(jìn)scroll-view的父元素，設(shè)置固定高度和間隔。
設(shè)置scroll-viewflex：1，讓scroll-view占據(jù)父元素中的剩余空間。
表單控件聚焦后頁(yè)面上推問題
現(xiàn)象：頁(yè)面上滑導(dǎo)致自定義導(dǎo)航上滑
原因：1. 導(dǎo)航本身就沒有加載完畢或者設(shè)置樣式的時(shí)間在顯示之后
2. 頁(yè)面本身的上滑，帶動(dòng)了自定義導(dǎo)航的上滑
解決方法：1. 提前設(shè)置樣式的時(shí)間，或者在多處設(shè)置樣式2. 禁止頁(yè)面上滑，使用wx.pageScrolTo({top:0})，在頁(yè)面的配置文件中設(shè)置disableScroll：true。
3. 自定義實(shí)現(xiàn)頁(yè)面上推邏輯，監(jiān)聽表單控件的聚焦事件，聚焦時(shí)更改元素的布局屬性。
小程序web-view頁(yè)面返回到小程序頁(yè)面
背景：web-view中的支付頁(yè)面，點(diǎn)擊支付，跳轉(zhuǎn)到小程序的支付頁(yè)面，支付后返回到后端返回的web-view的url指定的頁(yè)面，然后當(dāng)用戶點(diǎn)擊返回時(shí)，從該頁(yè)面返回到小程序首頁(yè)。
解決思路：
-
使用popstate
觸發(fā)popstate的前提：文章來源：http://www.zghlxwxcb.cn/news/detail-497551.html- 顯式添加歷史記錄
- 監(jiān)聽popstate事件
- 用戶交互：移動(dòng)端為安卓機(jī)才需要，ios不需要
popstate在安卓上需要用戶交互才能觸發(fā)，但是項(xiàng)目又不能添加額外的交互，棄用popstate。文章來源地址http://www.zghlxwxcb.cn/news/detail-497551.html
- 使用小程序頁(yè)面棧進(jìn)行返回
思路：保證小程序在支付過程中頁(yè)面棧中除tabbar頁(yè)面外只有一個(gè)頁(yè)面。當(dāng)支付后從返回的頁(yè)面返回到小程序的頁(yè)面棧前一個(gè)頁(yè)面，然后重定向到一個(gè)統(tǒng)一的頁(yè)面，從該頁(yè)面返回時(shí)目標(biāo)頁(yè)面的from為/，在beforeRouteEnter判斷即可。
到了這里，關(guān)于微信小程序：小程序常見問題及解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
