page-meta

页面属性配置节点，用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。可以配合 navigation-bar 组件一同使用。
通过这个节点可以获得类似于调用 wx.setBackgroundColor 等接口调用的效果。

效果展示

示例代码

WXML

<page-meta background-color="{{bgColor}}" background-color-top="{{bgColorTop}}" background-color-bottom="{{bgColorBottom}}" scroll-top="{{scrollTop}}" page-style="color: green" bindscroll="pageScroll" bindresize="pageResize" bindscrolldone="pageScrollDone">
    <navigation-bar title="{{nbTitle}}" front-color="{{nbFrontColor}}" background-color="{{nbBackgroundColor}}" />
</page-meta>
<view>以下是页面正文</view>
<button bindtap="scrollTo200">点击跳到 200rpx 处</button>
<view class="intro">
    <text>
    这个页面文字是绿色的，而且要长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    </text>
</view>

JS

const app = getApp()

Page({
  data: {
    bgTextStyle: 'dark',
    scrollTop: '100',
    bgColor: '#ff0000',
    bgColorTop: '#00ff00',
    bgColorBottom: '#0000ff',
    nbTitle: '原标题',
    nbLoading: false,
    nbFrontColor: '#000000',
    nbBackgroundColor: '#ffffff',
  },
  onLoad() {
  },
  scrollTo200: function () {
    this.setData({
      scrollTop: '200rpx'
    })
  },
  pageScroll: function (e) {
    console.log('scroll', e.detail)
  },
  pageResize: function (e) {
    console.log('resize', e.detail)
  },
  pageScrollDone: function (e) {
    console.log('scrolldone', e.detail)
    this.setData({
      scrollTop: e.detail.scrollTop
    })
  },
  onPullDownRefresh() { }
})

WXSS

.intro {
  margin: 30px;
  text-align: center;
}

API

属性	类型	默认值	必填	说明
background-color	string		否	窗口的背景色，必须为十六进制颜色值
background-color-top	string		否	顶部窗口的背景色，必须为十六进制颜色值，仅 iOS 支持
background-color-bottom	string		否	底部窗口的背景色，必须为十六进制颜色值，仅 iOS 支持
scroll-top	string	“”	否	滚动位置，可以使用 px 或者 rpx 为单位，在被设置时，页面会滚动到对应位置
page-style	string	“”	否	页面根节点样式，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点
bindresize	eventhandle		否	页面尺寸变化时会触发 resize 事件， event.detail = { size: { windowWidth, windowHeight } }
bindscroll	eventhandle		否	页面滚动时会触发 scroll 事件， event.detail = { scrollTop }
bindscrolldone	eventhandle		否	如果通过改变 scroll-top 属性来使页面滚动，页面滚动结束后会触发 scrolldone 事件