get-current-pages.uvue

<template>
  <page-head title="getCurrentPages"></page-head>
  <view class="uni-padding-wrap">
    <button @click="_getCurrentPages">getCurrentPages</button>
    <view v-if="pages.length" style="padding: 15px 0px">
      <text>当前页面栈中 {{ pages.length }} 个页面，列表如下：</text>
      <template v-for="(page, index) in pages" :key="page.route">
        <text style="margin-top: 5px">index: {{ index }}, route: {{ page.route }}</text>
      </template>
    </view>
    <button class="btn btn-get-page-style" type="default" @click="getPageStyle">getPageStyle</button>
    <button class="btn btn-set-page-style-1" type="default" @click="setPageStyle(true)">setPageStyle(true)</button>
    <button class="btn btn-set-page-style-0" type="default" @click="setPageStyle(false)">setPageStyle(false)</button>
    <text class="page-style">当前 PageStyle</text>
    <text class="page-style-value">{{pageStyleText}}</text>
    <text class="status">状态：</text>
    <view class="status-list">
      <text>enablePullDownRefresh: {{enablePullDownRefreshStatus}}</text>
    </view>
    <text class="tips">当前版本仅支持设置属性 enablePullDownRefresh</text>
  </view>
</template>

<script>
  class Page {
    constructor(public route : string) {
    }
  }

  export default {
    data() {
      return {
        checked: false,
        pages: [] as Page[],
        currentPageStyle: {} as UTSJSONObject,
        currentPageStyleIsUTSJSONObject: true,
        // TODO
        enablePullDownRefreshStatus: true
      }
    },
    computed: {
      pageStyleText() : string {
        return JSON.stringify(this.currentPageStyle)
      }
    },
    onPullDownRefresh() {
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 3000)
    },
    methods: {
      _getCurrentPages: function () {
        this.pages.length = 0
        const pages = getCurrentPages()
        this.pages.push(new Page(pages[0].route))
        if (this.pages[0].route.includes('/tabBar/')) {
          this.checked = true
        }
        for (let i = 1; i < pages.length; i++) {
          this.pages.push(new Page(pages[i].route))
          if (pages[i].route.includes('/tabBar/')) {
            this.checked = false
          }
        }
      },
      getPageStyle() {
        const pages = getCurrentPages();
        const currentPage = pages[pages.length - 1];
        this.currentPageStyle = currentPage.$getPageStyle();
        this.currentPageStyleIsUTSJSONObject = this.currentPageStyle instanceof UTSJSONObject
      },
      setPageStyle(enable : boolean) {
        // 目前仅支持 enablePullDownRefresh
        const pages = getCurrentPages();
        const currentPage = pages[pages.length - 1];
        currentPage.$setPageStyle({
          enablePullDownRefresh: enable
        });
        this.enablePullDownRefreshStatus = enable
      },
      startPullDownRefresh() {
        uni.startPullDownRefresh()
      }
      // getCurrentPage(): Page {
      //   const pages = getCurrentPages();
      //   const currentPage = pages[pages.length - 1];
      //   return currentPage;
      // }
    },
  }
</script>


<style>
  .btn {
    margin-top: 10px;
  }

  .page-style {
    margin-top: 15px;
  }

  .page-style-value {
    margin-top: 5px;
    padding: 5px;
    background-color: #fff;
    width: 100%;
    /* #ifdef WEB */
    overflow-wrap: break-word;
    /* #endif */
  }

  .status {
    margin-top: 20px;
  }

  .status-list {
    margin-top: 5px;
  }

  .tips {
    font-size: 12px;
    margin-top: 15px;
    opacity: .8;
  }
</style>