小程序模板網(wǎng)

微信小程序-ios系統(tǒng)-下拉上拉出現(xiàn)白色,如何處理呢?

發(fā)布時(shí)間:2018-05-05 15:07 所屬欄目:小程序開發(fā)教程

這幾天做小程序,有些頁(yè)面都是全屏的背景,在安卓上背景是固定的,而在ios上上拉下拉出現(xiàn)白色,測(cè)試說體驗(yàn)不太好,一開始我以為是下拉上拉刷新造成的,關(guān)閉了依然是這樣。為了體驗(yàn)好點(diǎn),可以按一下解決:

方式一:

  可以在page.json文件內(nèi)配置 :"backgroundColor": "#ccc" 屬性,這個(gè)方法比較便捷。但是對(duì)于一些全屏背景的頁(yè)面體驗(yàn)還不是很好

方式二:

  對(duì)于一些全屏背景頁(yè)面,我們可以讓背景固定這樣體驗(yàn)會(huì)好點(diǎn),可以按以下進(jìn)行操作:

  1》page.json設(shè)置 "disableScroll":true ; 表示:設(shè)置為 true 則頁(yè)面整體不能上下滾動(dòng);只在 page.json 中有效,無法在 app.json 中設(shè)置該項(xiàng)

  2》對(duì)于一些頁(yè)面內(nèi)容太多,需要頁(yè)面需要上下滑動(dòng)的可以在page.wxml頁(yè)面這么處理

 

				
  1. <scroll-view scroll-y style="height:{{wh}}px;" bindscrolltolower="onBottom">
  2.  
  3. </scroll-view>

  3》page.js

 

				
  1. wx.getSystemInfo({
  2. success: function (res) {
  3. that.setData({
  4. "wh": res.windowHeight
  5. })
  6. }
  7. })

  4》全屏背景樣式

 

				
  1.   page{background: url(xxx.png) no-repeat center center fixed;background-size: cover; } 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://u-renovate.com/wxmini/doc/course/24266.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢