微信小程序之頁面配置介紹

上次介紹了小程序的全局配置,還有一點頁面配置沒有介紹,今天首先就來看看小程序的頁面配置,下面是官方的文檔介紹:

微信小程序之頁面配置介紹

下面我們一個個來看具體的效果。

導航欄背景顏色navigationBarBackgroundColor

設置導航欄的背景顏色,這裡如果在app.json中設置了全局的,那麼頁面中的會覆蓋全局的即如果在全局中有設置相應的最終顯示的以頁面中的為準,否則就按全局設置顯示。實例代碼如下:

微信小程序之頁面配置介紹

這是全局配置中的背景色

微信小程序之頁面配置介紹

這是日誌頁面的背景色,從上面可以看到最終顯示的是淘寶的紅色

導航欄標題顏色navigationBarTextStyle

導航欄標題顏色,僅支持 black / white,這裡的可選項就只有兩個黑色和白色,實例如下:

微信小程序之頁面配置介紹

黑色標題效果

微信小程序之頁面配置介紹

白色標題效果

導航欄文字navigationBarTitleText

導航欄標題文字內容,每個頁面的標題欄文字,這個是可以用代碼進行修改的。

窗口的背景色backgroundColor

窗口的背景色,貌似這個沒看出什麼效果來

下拉loading的樣式backgroundTextStyle

下拉 loading 的樣式,僅支持 dark / light,這裡如果要看效果需要先設置下拉刷新的屬性enablePullDownRefresh值為true才可以使用下拉刷新,實例如下:

微信小程序之頁面配置介紹

下拉的效果對於兩個選項來說效果不明顯

開啟下拉刷新enablePullDownRefresh

是否開啟下拉刷新,只有設置為true時才可以使用下拉刷新的功能,當然下拉刷新並不是簡單的像上面的設置就可以了。可以通過wx.startPullDownRefresh觸發下拉刷新,調用後觸發下拉刷新動畫,效果與用戶手動下拉刷新一致。當處理完數據刷新後,wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。

頁面觸底距離onReachBottomDistance

頁面上拉觸底事件觸發時距頁面底部距離,單位為px。默認值為50

頁面能否滾動disableScroll

設置為 true 則頁面整體不能上下滾動;只在頁面配置中有效,無法在 app.json 中設置該項


分享到:


相關文章: