wxapp頁面屬性配置節(jié)點 page-meta

2022-05-11 16:15 更新
基礎庫 2.9.0 開始支持,低版本需做兼容處理

頁面屬性配置節(jié)點,用于指定頁面的一些屬性、監(jiān)聽頁面事件。只能是頁面內(nèi)的第一個節(jié)點??梢耘浜?nbsp;navigation-bar 組件一同使用。

通過這個節(jié)點可以獲得類似于調(diào)用 wx.setBackgroundTextStyle wx.setBackgroundColor 等接口調(diào)用的效果。

屬性 類型 默認值 必填 說明 最低版本
background-text-style string 下拉背景字體、loading 圖的樣式,僅支持 dark 和 light 2.9.0
background-color string 窗口的背景色,必須為十六進制顏色值 2.9.0
background-color-top string 頂部窗口的背景色,必須為十六進制顏色值,僅 iOS 支持 2.9.0
background-color-bottom string 底部窗口的背景色,必須為十六進制顏色值,僅 iOS 支持 2.9.0
scroll-top string "" 滾動位置,可以使用 px 或者 rpx 為單位,在被設置時,頁面會滾動到對應位置 2.9.0
scroll-duration number 300 滾動動畫時長 2.9.0
page-style string "" 頁面根節(jié)點樣式,頁面根節(jié)點是所有頁面節(jié)點的祖先節(jié)點,相當于 HTML 中的 body 節(jié)點 2.9.0
body-font-size string "" 頁面 page 的字體大小,可以設置為 system ,表示使用當前用戶設置的微信字體大小 2.11.0
root-font-size string "" 頁面的根字體大小,頁面中的所有 rem 單位,將使用這個字體大小作為參考值,即 1rem 等于這個字體大小;自小程序版本 2.11.0 起,也可以設置為 system 2.9.0
bindresize eventhandle 頁面尺寸變化時會觸發(fā) resize 事件, event.detail = { size: { windowWidth, windowHeight } } 2.9.0
bindscroll eventhandle 頁面滾動時會觸發(fā) scroll 事件, event.detail = { scrollTop } 2.9.0
bindscrolldone eventhandle 如果通過改變 scroll-top 屬性來使頁面滾動,頁面滾動結(jié)束后會觸發(fā) scrolldone 事件 2.9.0

示例代碼

<page-meta
  background-text-style="{{bgTextStyle}}"
  background-color="{{bgColor}}"
  background-color-top="{{bgColorTop}}"
  background-color-bottom="{{bgColorBottom}}"
  scroll-top="{{scrollTop}}"
  page-style="color: green"
  root-font-size="16px"
>
  <navigation-bar
    title="{{nbTitle}}"
    loading="{{nbLoading}}"
    front-color="{{nbFrontColor}}"
    background-color="{{nbBackgroundColor}}"
  />
</page-meta>
Page({
  data: {
    bgTextStyle: 'dark',
    scrollTop: '200rpx',
    bgColor: '#ff0000',
    bgColorTop: '#00ff00',
    bgColorBottom: '#0000ff',
    nbTitle: '標題',
    nbLoading: false,
    nbFrontColor: '#000000',
    nbBackgroundColor: '#ffffff',
  },
})


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號