Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 a2bd8a95 作者: 方治民
操作

feat: 分离 example 页面保持 index 与主分支一致

上级 c23fc2de
正在显示 包含 166 行增加 和 86 行删除
src/pages/example/index.vue 0 → 100644
<script setup lang="ts">
// @unocss-include
const data = reactive({
items: [
{
name: 'Mapbox 地图示例',
icon: 'emojione-globe-showing-europe-africa',
page: '/pages/example/mapbox/index',
},
{
name: 'LinkedList 大列表示例',
icon: 'emojione-letter-z',
page: `/pages/example/linkedlist/index?multiple=true`,
},
// #ifdef APP-PLUS
{
name: 'LinkedList 大列表示例 - NVUE',
icon: 'emojione-letter-z',
page: `/pages/example/linkedlist-nvue/index?multiple=true`,
},
// #endif
],
})
function goto(url: string) {
uni.navigateTo({ url })
}
</script>
<template>
<view class="fui-wrap">
<scroll-view class="fui-scroll__box" scroll-y :style="{ height: '100%' }">
<view class="fui-list__view">
<fui-list-cell
arrow
:bottomBorder="false"
radius="16rpx"
marginTop="24"
v-for="(item, idx) in data.items"
:key="idx"
@click="goto(item.page)"
>
<view class="fui-list__item fui-align__center">
<Icon :class="[`icon-${item.icon}`]" size="48" />
<text>{{ item.name }}</text>
</view>
</fui-list-cell>
</view>
</scroll-view>
</view>
</template>
<style lang="less">
page {
height: 100%;
}
.fui-swiper__box,
.fui-swiper__item,
.fui-scroll__box {
width: 100%;
}
.fui-list__view {
width: 100%;
min-height: 101%;
padding: 8rpx 32rpx 32rpx;
box-sizing: border-box;
}
.fui-list__item {
width: 100%;
height: 112rpx;
}
.fui-list__item text {
padding-left: 24rpx;
padding-right: 12rpx;
flex-shrink: 0;
}
.fui-item__icon-box {
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 50rpx 0 30rpx;
}
.fui-item__icon,
.fui-vip__icon {
width: 48rpx;
height: 48rpx;
display: block;
flex-shrink: 0;
}
</style>
src/pages/index/index.vue
<script setup lang="ts"> <script setup lang="ts">
// @unocss-include import dayjs from 'dayjs'
const data = reactive({ import { checkUpgrade } from '@/utils/upgrade'
items: [ import { useRuntime } from '@/hooks/app/useRuntime'
{
name: 'Mapbox 地图示例',
icon: 'emojione-globe-showing-europe-africa',
page: '/pages/example/mapbox/index',
},
{
name: 'LinkedList 大列表示例',
icon: 'emojione-letter-z',
page: `/pages/example/linkedlist/index?multiple=true`,
},
// #ifdef APP-PLUS
{
name: 'LinkedList 大列表示例 - NVUE',
icon: 'emojione-letter-z',
page: `/pages/example/linkedlist-nvue/index?multiple=true`,
},
// #endif
],
})
function goto(url: string) { const { app } = useRuntime()
uni.navigateTo({ url }) const year = ref(dayjs().year())
} const title = ref('Hello World')
</script> const version = computed(() => app.value.version)
<template> function surprise() {
<view class="fui-wrap"> // #ifdef APP-PLUS
<scroll-view class="fui-scroll__box" scroll-y :style="{ height: '100%' }"> const orientation = plus.navigator.getOrientation()
<view class="fui-list__view"> if (orientation === 0) {
<fui-list-cell plus.screen.lockOrientation('landscape-primary')
arrow } else if (orientation === 90) {
:padding="[0, '32rpx']" plus.screen.lockOrientation('portrait-primary')
:bottomBorder="false" }
radius="16rpx" Message.toast('🥳 surprise~')
marginTop="24" // #endif
v-for="(item, idx) in data.items"
:key="idx"
@click="goto(item.page)"
>
<view class="fui-list__item fui-align__center">
<Icon :class="[`icon-${item.icon}`]" size="48" />
<text>{{ item.name }}</text>
</view>
</fui-list-cell>
</view>
</scroll-view>
</view>
</template>
<style lang="less"> // #ifndef APP-PLUS
page { Message.toast(`在手机上运行点击有惊喜~ ╰(*°▽°*)╯`)
height: 100%; // #endif
} }
.fui-swiper__box, const animate = ref()
.fui-swiper__item, function handUp() {
.fui-scroll__box { if (animate.value) {
width: 100%; return
} }
.fui-list__view { Message.toast('👋🏻')
width: 100%; animate.value = 'animate-swing'
min-height: 101%; setTimeout(() => (animate.value = null), 1500)
padding: 8rpx 32rpx 32rpx;
box-sizing: border-box;
} }
</script>
.fui-list__item { <template>
width: 100%; <view class="content flex-center flex-col">
height: 112rpx; <fui-avatar
} src="/static/logo.png"
radius="14"
size="large"
background="transparent"
class="!mb-5"
@click="surprise"
/>
<view class="flex-center flex-col mb-5">
<text class="title">{{ title }}</text>
<text class="title">{{ $t('app.hello') }}</text>
<Icon icon="emojione:grinning-face" size="48" class="mt-3" />
<fui-divider class="mt-5" />
.fui-list__item text { <uni-icons type="hand-up" size="30" class="mt-3" :class="[animate]" @click="handUp" />
padding-left: 24rpx; </view>
padding-right: 12rpx; <fui-footer isFixed>
flex-shrink: 0; <template #text>
<view v-if="version" @click="checkUpgrade(true)">V{{ version }}</view>
<view class="mt-1">壹润科技 版权所有</view>
<view class="mt-1">Copyright © 2021-{{ year }} Yiring. All Ringhts Reserved</view>
</template>
</fui-footer>
</view>
</template>
<style lang="less" scoped>
.content {
height: calc(100vh - 100rpx);
} }
.fui-item__icon-box { .title {
width: 48rpx;
height: 48rpx;
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
margin: 50rpx 0 30rpx; font-size: 36rpx;
} color: #8f8f94;
.fui-item__icon,
.fui-vip__icon {
width: 48rpx;
height: 48rpx;
display: block;
flex-shrink: 0;
} }
</style> </style>
types/components.d.ts
...@@ -124,10 +124,12 @@ declare module '@vue/runtime-core' { ...@@ -124,10 +124,12 @@ declare module '@vue/runtime-core' {
FuiTopPopup: typeof import('./../src/components/firstui/fui-top-popup/fui-top-popup.vue')['default'] FuiTopPopup: typeof import('./../src/components/firstui/fui-top-popup/fui-top-popup.vue')['default']
FuiUpload: typeof import('./../src/components/firstui/fui-upload/fui-upload.vue')['default'] FuiUpload: typeof import('./../src/components/firstui/fui-upload/fui-upload.vue')['default']
FuiUploadVideo: typeof import('./../src/components/firstui/fui-upload-video/fui-upload-video.vue')['default'] FuiUploadVideo: typeof import('./../src/components/firstui/fui-upload-video/fui-upload-video.vue')['default']
FuiVirtualIndexList: typeof import('./../src/components/firstui/fui-virtual-index-list/fui-virtual-index-list.vue')['default']
FuiVtabs: typeof import('./../src/components/firstui/fui-vtabs/fui-vtabs.vue')['default'] FuiVtabs: typeof import('./../src/components/firstui/fui-vtabs/fui-vtabs.vue')['default']
FuiVtabsContent: typeof import('./../src/components/firstui/fui-vtabs-content/fui-vtabs-content.vue')['default'] FuiVtabsContent: typeof import('./../src/components/firstui/fui-vtabs-content/fui-vtabs-content.vue')['default']
FuiWaterfall: typeof import('./../src/components/firstui/fui-waterfall/fui-waterfall.vue')['default'] FuiWaterfall: typeof import('./../src/components/firstui/fui-waterfall/fui-waterfall.vue')['default']
FuiWaterfallItem: typeof import('./../src/components/firstui/fui-waterfall-item/fui-waterfall-item.vue')['default'] FuiWaterfallItem: typeof import('./../src/components/firstui/fui-waterfall-item/fui-waterfall-item.vue')['default']
FVirtualIndexListItem: typeof import('./../src/components/firstui/fui-virtual-index-list/f-virtual-index-list-item.vue')['default']
Icon: typeof import('./../src/components/Icon/index.vue')['default'] Icon: typeof import('./../src/components/Icon/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
......
types/env.d.ts
/// <reference types="vite/client" /> /// <reference types="vite/client" />
declare module '*.vue' { declare module '*.vue' {
import { DefineComponent } from 'vue' import { defineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any> const component: ReturnType<typeof defineComponent>
export default component export default component
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论