template.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view class="uni-container">
      <view class="uni-header-logo">
        <image class="uni-header-image" src="/static/templateIndex.png"></image>
      </view>
      <view class="uni-hello-text">
        <text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text>
        <u-link
          class="hello-link"
          href="https://ext.dcloud.net.cn"
          :text="'https://ext.dcloud.net.cn'"
          :inWhiteList="true"
        ></u-link>
      </view>
      <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
        <view
          class="uni-panel-h"
          :class="item.open ? 'uni-panel-h-on' : ''"
          @click="triggerCollapse(index, item)"
        >
          <text
            class="uni-panel-text"
            :class="item.enable == false ? 'text-disabled' : ''"
            >{{ item.name }}</text
          >
          <image
            :src="
              item.pages.length > 0
                ? item.open
                  ? arrowUpIcon
                  : arrowDownIcon
                : arrowRightIcon
            "
            class="uni-icon"
          >
          </image>
        </view>
        <view class="uni-panel-c" v-if="item.open">
          <view
            class="uni-navigate-item"
            v-for="(page, key) in item.pages"
            :key="key"
            @click="goDetailPage(page)"
          >
            <text
              class="uni-navigate-text"
              :class="page.enable == false ? 'text-disabled' : ''"
              >{{ page.name }}</text
            >
            <image :src="arrowRightIcon" class="uni-icon"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="ts">
type Page = {
  name: string
  enable?: boolean
  url: string
}

type ListItem = {
  id: string
  name: string
  open: boolean
  pages: Page[]
  url?: string
  enable?: boolean
}
export default {
  data() {
    return {
      list: [
        {
          id: 'long-list',
          url: 'long-list',
          name: '复杂长列表',
          open: false,
          enable: false,
          pages: [] as Page[],
        },
        {
          id: 'scroll-fold-nav',
          url: 'scroll-fold-nav',
          name: '随滚动折叠的导航栏',
          open: false,
          pages: [] as Page[],
        },
        {
          id: 'scroll-fold-nav2',
          url: 'scroll-fold-nav2',
          name: '随滚动折叠的导航栏2',
          open: false,
          pages: [] as Page[],
        },
        {
          id: 'swiper-list',
          url: 'swiper-list',
          name: 'swiper-list',
          open: false,
          enable: false,
          pages: [] as Page[],
        },
        {
          id: 'custom-refresher',
          url: 'custom-refresher',
          name: '自定义下拉刷新',
          open: false,
          pages: [] as Page[],
        },
        {
          id: 'pull-zoom-image',
          url: 'pull-zoom-image',
          name: '下拉缩放顶部封面图',
          open: false,
          enable: false,
          pages: [] as Page[],
        },
        {
          id: 'show-search-with-scroll',
          url: 'show-search-with-scroll',
          name: '滚动后自动显隐的搜索框',
          open: false,
          enable: false,
          pages: [] as Page[],
        },
        {
          id: 'swiper-vertical-video',
          url: 'swiper-vertical-video',
          name: '竖滑视频',
          open: false,
          pages: [] as Page[],
        },
        {
          id: 'scroll-sticky',
          url: 'scroll-sticky',
          name: '吸顶',
          open: false,
          pages: [] as Page[],
        },
        {
          id: 'half-screen',
          url: 'half-screen',
          name: '半屏弹窗',
          open: false,
          pages: [] as Page[],
        },
        {
          id: 'drop-card',
          url: 'drop-card',
          name: '划走式卡片',
          open: false,
          pages: [] as Page[],
        },
        {
          id: 'calendar',
          url: 'calendar',
          name: '日历',
          open: false,
          pages: [] as Page[],
        },
      ] as ListItem[],
      arrowUpIcon: '/static/icons/arrow-up.png',
      arrowDownIcon: '/static/icons/arrow-down.png',
      arrowRightIcon: '/static/icons/arrow-right.png',
    }
  },
  methods: {
    triggerCollapse(index?: number, item: ListItem) {
      if (item.pages.length == 0) {
        const page: Page = {
          name: item.name,
          enable: item.enable,
          url: item.url!,
        }
        this.goDetailPage(page)
        return
      }
      for (var i = 0; i < this.list.length; ++i) {
        if (index == i) {
          this.list[i].open = !this.list[i].open
        } else {
          this.list[i].open = false
        }
      }
    },
    goDetailPage(e: Page) {
      if (e.enable == false) {
        uni.showToast({
          icon: 'none',
          title: '暂不支持',
        })
        return
      }
      const url =
        e.url.indexOf('platform') > -1
          ? e.url
          : `/pages/template/${e.url}/${e.url}`
      uni.navigateTo({
        url,
      })
    },
  },
}
</script>

<style>
@import '../../common/uni-uvue.css';
</style>