feat: page-meta demo

app.json

@@ -63,7 +63,8 @@
     "pages/API/intersection-observer/intersection-observer",
     "pages/API/download-file/download-file",
     "pages/API/upload-file/upload-file",
-    "pages/API/voice/voice"
+    "pages/API/voice/voice",
+    "pages/component/page-meta/page-meta"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/component/index/index.js

@@ -43,6 +43,10 @@ Page({
         name: '开放能力',
         open: false,
         pages: ['web-view']
+      }, {
+        id: 'page-attr',
+        name: '页面属性配置节点',
+        pages: ['page-meta']
       }
     ],
     theme: 'light'

pages/component/page-meta/page-meta.js

@@ -0,0 +1,56 @@
+// pages/component/page-meta/page-meta.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    tile: 'page-meta',
+    bgColor: '#ffffff',
+    bgColorTop: '#333333',
+    bgColorBottom: '#999999',
+    scrollTop: '200px',
+    duration: 200,
+    fontSize: '20px',
+    pageStyle: 'color: red',
+    navigationTitle: '初始化navigation-bar文档',
+    navigationBgColor: '#000000',
+    frontColor: '#ffffff', // 只支持是全黑或者全白
+    isLoadding: false,
+    duration: 300,
+    func: 'linear'
+
+  },
+  onResize(e) {
+    console.log('当前页面正在resize',e)
+  },
+  onScroll(e) {
+    console.log('当前页面正在滑动', e)
+  },
+  updatePageMeta() {
+    this.setData({
+      bgColor: '#000000',
+      bgColorTop: '#999999',
+      bgColorBottom: '#333333',
+      fontSize: '30px',
+      pageStyle: 'color: blue',
+
+    })
+  },
+  updateNavigationBar() {
+    this.setData({
+      navigationTitle: '更新navigation-bar文档',
+      navigationBgColor: '#999999',
+      frontColor: '#000000', // 只支持是全黑或者全白
+      isLoadding: true,
+      duration: 500,
+      func: 'linear'
+    })
+  },
+  onShareAppMessage() {
+    return {
+      title: 'page-meta',
+      path: 'pages/component/page-meta/page-meta'
+    }
+  }
+})

pages/component/page-meta/page-meta.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "page-meta"
+}

pages/component/page-meta/page-meta.wxml

@@ -0,0 +1,39 @@
+<!--pages/component/page-meta/page-meta.wxml-->
+<import src="../../common/head.wxml" />
+<import src="../../common/foot.wxml" />
+
+<page-meta  
+  background-color='{{bgColor}}'
+  background-color-top="{{bgColorTop}}"
+  background-color-bottom="{{bgColorBottom}}"
+  scroll-top="{{scrollTop}}}"
+  scrollDuration="{{duration}}"
+  root-font-size='{{fontSize}}'
+  page-style='{{pageStyle}}'
+  bindresize='onResize'
+  bindscroll="onScroll"
+>
+  <navigation-bar
+    title='{{navigationTitle}}'
+    background-color='{{navigationBgColor}}'
+    front-color='{{frontColor}}'
+    loading='{{isLoadding}}'
+    color-animation-duration='{{duration}}'
+    color-animation-timing-func='{{func}}'
+  ></navigation-bar>
+</page-meta>
+
+<view class="container">
+  <template is="head" data="{{title: 'page-meta'}}"/>
+  <view class="page-body">
+    <button type="primary" bindtap="updatePageMeta">更新page-meta数据</button>
+    <button type="primary" bindtap="updateNavigationBar">更新navigation-bar数据</button>
+
+
+    <view class="place-holder-box">
+        占位符，为了测试滑动
+    </view>
+  </view>
+  
+  <template is="foot" />
+</view>

pages/component/page-meta/page-meta.wxss

@@ -0,0 +1,10 @@
+/* pages/component/page-meta/page-meta.wxss */
+
+.place-holder-box {
+  margin: 50px auto;
+  text-align: center;
+  padding-top: 50px;
+  background-color: #eee;
+  width: 300px;
+  height: 800px;
+}