feat(dialogPage): 补充 getPageStyle setPageStyle 示例

pages.json

@@ -1481,6 +1481,14 @@
 			}
 		},
 		// #endif
+		// #ifdef APP-ANDROID || APP-IOS || WEB
+		{
+			"path": "pages/API/dialog-page/dialog-3",
+			"style": {
+				"navigationBarTitleText": "dialogPage3"
+			}
+		},
+		// #endif
 		// #ifdef APP-ANDROID || APP-IOS || MP-WEIXIN
 		{
 			"path": "pages/API/create-interstitial-ad/create-interstitial-ad",
@@ -2323,10 +2331,9 @@
 			}
 		},
 		{
-		  "path" : "pages/template/WXS/WXS",
-		  "style" :
-		  {
-		    "navigationBarTitleText" : "WXS"
+			"path": "pages/template/WXS/WXS",
+			"style": {
+				"navigationBarTitleText": "WXS"
 			}
 		}
 		// #endif

pages/API/dialog-page/dialog-3.uvue

+<template>
+  <view id="dialog3" class="dialog-container">
+    <scroll-view class="dialog-content">
+      <text>title: {{ title }}</text>
+      <template v-for="(item, index) in PageStyleArray">
+        <view class="page-style-item" v-if="currentPageStyle[item.key] != null" :key="index">
+          <view class="item-text">
+            <text class="item-text-key">{{ item.key }}:</text>
+            <text class="item-text-value">{{
+              currentPageStyle[item.key]
+            }}</text>
+          </view>
+          <view class="mt-10" v-if="item.type == 'boolean'">
+            <switch :checked="currentPageStyle.getBoolean(item.key)"
+              @change="switchChange(item.key, $event as UniSwitchChangeEvent)">
+            </switch>
+          </view>
+          <view class="mt-10" v-else-if="item.type == 'number'">
+            <slider :value="currentPageStyle.getNumber(item.key)" :show-value="true"
+              @change="sliderChange(item.key, $event as UniSliderChangeEvent)" />
+          </view>
+          <view class="mt-10" v-else-if="item.type == 'string'">
+            <radio-group class="radio-set-value" @change="radioChange(item.key, $event as RadioGroupChangeEvent)">
+              <radio class="ml-10" v-for="(item2, index2) in item.value" :key="index2" :value="item2"
+                :checked="currentPageStyle[item.key] == item2">{{ item2 }}
+              </radio>
+            </radio-group>
+          </view>
+        </view>
+      </template>
+      <text class="mt-10 choose-close-animation-type-title">choose close dialogPage animationType</text>
+      <radio-group class="choose-close-animation-type-radio-group" @change="handleChooseAnimationType">
+        <radio class="ml-10 mt-10" v-for="item in closeAnimationTypeList" :key="item" :value="item"
+          :checked="closeAnimationType == item">{{ item }}
+        </radio>
+      </radio-group>
+      <button class="mt-10" id="dialog1-close-dialog" @click="closeDialog">
+        closeDialog
+      </button>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+  import { PageStyleItem, PageStyleArray } from './page-style.uts';
+  import {
+    state,
+    setLifeCycleNum
+  } from '@/store/index.uts'
+
+  type CloseAnimationType =
+    'auto' |
+    'none' |
+    'slide-out-right' |
+    'slide-out-left' |
+    'slide-out-top' |
+    'slide-out-bottom' |
+    'fade-out' |
+    'zoom-in' |
+    'zoom-fade-in'
+
+  export default {
+    data() {
+      return {
+        title: 'dialog 3',
+        PageStyleArray: PageStyleArray as PageStyleItem[],
+        currentPageStyle: {} as UTSJSONObject,
+        closeAnimationType: 'none' as CloseAnimationType,
+        closeAnimationTypeList: [
+          'auto',
+          'none',
+          'slide-out-right',
+          'slide-out-left',
+          'slide-out-top',
+          'slide-out-bottom',
+          'fade-out',
+          'zoom-in',
+          'zoom-fade-in'
+        ]
+      }
+    },
+    onLoad(_ : OnLoadOptions) {
+      this.getPageStyle()
+    },
+    methods: {
+      getPageStyle() {
+        this.currentPageStyle = this.$page.getPageStyle()
+      },
+      radioChange(key : string, e : RadioGroupChangeEvent) {
+        this.setStyleValue(key, e.detail.value);
+      },
+      sliderChange(key : string, e : UniSliderChangeEvent) {
+        this.setStyleValue(key, e.detail.value);
+      },
+      switchChange(key : string, e : UniSwitchChangeEvent) {
+        this.setStyleValue(key, e.detail.value);
+      },
+      setStyleValue(key : string, value : any) {
+        const style = {}
+        style[key] = value
+        this.setPageStyle(style)
+        this.getPageStyle()
+      },
+      setPageStyle(style : UTSJSONObject) {
+        this.$page.setPageStyle(style);
+      },
+      handleChooseAnimationType(e : RadioGroupChangeEvent){
+        this.closeAnimationType = e.detail.value as CloseAnimationType
+      },
+      closeDialog() {
+        uni.closeDialogPage({
+          animationType: this.closeAnimationType,
+          success(res) {
+            console.log('closeDialog success', res)
+          },
+          fail(err) {
+            console.log('closeDialog fail', err)
+          },
+          complete(res) {
+            console.log('closeDialog complete', res)
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+  .dialog-container {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .dialog-content {
+    width: 90%;
+    height: 500px;
+    padding: 10px 6px;
+    background-color: #fff;
+    border-radius: 6px;
+  }
+
+  .mt-10 {
+    margin-top: 10px;
+  }
+  .ml-10 {
+    margin-left: 10px;
+  }
+
+  .page-style-item {
+    padding: 6px 0;
+    margin-top: 10px;
+    background-color: #ffffff;
+    border-radius: 5px;
+  }
+
+  .item-text {
+    flex-direction: row;
+  }
+
+  .item-text-key {
+    font-weight: bold;
+  }
+
+  .item-text-value {
+    margin-left: 5px;
+  }
+
+  .radio-set-value {
+    flex-direction: row;
+  }
+  .choose-close-animation-type-title{
+    font-weight: bold;
+  }
+  .choose-close-animation-type-radio-group{
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  </style

pages/API/dialog-page/page-style.uts

+
+export type PageStyleItem = {
+  key : string
+  type : string
+  value : Array<any>
+}
+
+export const PageStyleArray = [
+  {
+    key: "navigationBarBackgroundColor",
+    type: "string",
+    value: ["#007AFF", "#FFFFFF", "#000000"]
+  },
+  {
+    key: "navigationBarTextStyle",
+    type: "string",
+    value: ["white", "black"]
+  },
+  {
+    key: "navigationBarTitleText",
+    type: "string",
+    value: ["dialogPage", "title2", "title3"]
+  },
+  {
+    key: "navigationStyle",
+    type: "string",
+    value: ["default", "custom"]
+  },
+  {
+    key: "backgroundColor",
+    type: "string",
+    value: ["#FFFFFF", "#000000"]
+  },
+  {
+    key: "backgroundColorContent",
+    type: "string",
+    value: ["#FFFFFF", "transparent", "#000000"]
+  },
+  {
+    key: "backgroundTextStyle",
+    type: "string",
+    value: ["dark", "light"]
+  },
+  {
+    key: "enablePullDownRefresh",
+    type: "boolean",
+    value: [true, false]
+  },
+  {
+    key: "onReachBottomDistance",
+    type: "number",
+    value: [50, 100]
+  },
+  {
+    key: "pageOrientation",
+    type: "string",
+    value: ["auto", "portrait", "landscape"]
+  },
+  {
+    key: "backgroundColorTop",
+    type: "string",
+    value: ["#FFFFFF", "#000000"]
+  },
+  {
+    key: "backgroundColorBottom",
+    type: "string",
+    value: ["#FFFFFF", "#000000"]
+  },
+  {
+    key: "navigationBarAutoBackButton",
+    type: "boolean",
+    value: [true, false]
+  },
+  {
+    key: "hideStatusBar",
+    type: "boolean",
+    value: [true, false]
+  },
+  {
+    key: "hideBottomNavigationIndicator",
+    type: "boolean",
+    value: [true, false]
+  }] as PageStyleItem[]