template.uvue

<template>
  <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>
</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: "custom-navigationbar",
            url: "custom-navigationbar",
            name: "自定义导航栏",
            open: false,
            enable: false,
            pages: [] as Page[]
          },{
            id: "drop-card",
            url: "drop-card",
            name: "划走式卡片",
            open: false,
            pages: [] as Page[]
          },{
            id: "scroll-fold-nav",
            url: "scroll-fold-nav",
            name: "随滚动折叠的导航栏",
            open: false,
            pages: [] as Page[]
          },
          {
            id: "custom-pull-page",
            url: "custom-pull-page",
            name: "自定义上拉下拉效果",
            open: false,
            pages: [] as Page[]
          },
          {
            id: "swiper-vertical-video",
            url: "swiper-vertical-video",
            name: "竖滑视频",
            open: false,
            pages: [] as Page[]
          },
          {
            id: "sticky",
            url: "sticky",
            name: "吸顶",
            open: false,
            enable: false,
            pages: [] as Page[]
          },
          {
            id: "swiper-list",
            url: "swiper-list",
            name: "swiper-list",
            open: false,
            enable: 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';

  .uni-container {
    flex: 1;
  }
</style>