輕松建站 服務(wù)到位為客戶提供一體化網(wǎng)站設(shè)計(jì)服務(wù)
小程序開(kāi)發(fā)全功能小程序商城、開(kāi)發(fā)定制服務(wù)、全程售后服務(wù)、無(wú)憂備案
分享、交流、傳播知識(shí)分享、技術(shù)交流、經(jīng)驗(yàn)積累、提升能力
做微信小程序開(kāi)發(fā)時(shí)，當(dāng)頁(yè)面左右拖動(dòng)時(shí)造成的頁(yè)面白色背景現(xiàn)象，這個(gè)功能本是仿原生APP開(kāi)發(fā)時(shí)的左右拖動(dòng)切換頁(yè)面的功能，但自己開(kāi)發(fā)時(shí)并使用這個(gè)功能，所以嘛，需要去掉這種不是BUG的BUG,先看看效果載圖:
見(jiàn)圖片的紅色框出來(lái)部分,查了微信小程序的官方文檔,給出的解決方法是:在page(對(duì)應(yīng)的頁(yè)).json里將disableScroll屬性設(shè)置為true則頁(yè)面整體不能上下滾動(dòng)。如下圖:
這樣做的后果是,當(dāng)一個(gè)頁(yè)面的高度不能一屏顯示時(shí),就無(wú)法下拉了.
繼續(xù)解決不能下拉的問(wèn)題,要在當(dāng)前頁(yè)的滾動(dòng)部分設(shè)計(jì)下拉功能,可以使用scroll-view組件,除了使用scroll-view組件后,還要計(jì)算出整個(gè)頁(yè)面的高度適配,然后再計(jì)算出scroll-view部分的高度,以適配所有機(jī)型.
當(dāng)是帶滾動(dòng)組件的頁(yè)面時(shí)采用以上方法是可以解決的,但是像首頁(yè)這種,明顯不行,所以經(jīng)過(guò)研究后給出另一個(gè)解決方法:
首先給出我當(dāng)前頁(yè)的view布局:
其他view布局
然后在wxss樣式上寫(xiě)上此代碼:
page{
width: 100%;
}
.container{
width: 100%;
overflow: hidden;
}
至此完美解決左右拖動(dòng)出現(xiàn)空白背景問(wèn)題,當(dāng)然這只是一種解決思路,期待大家的更多解決方法.
