Skip to content

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

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

上级 c23fc2de
正在显示 包含 164 行增加 和 84 行删除
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">
// @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`,
},
import dayjs from 'dayjs'
import { checkUpgrade } from '@/utils/upgrade'
import { useRuntime } from '@/hooks/app/useRuntime'
const { app } = useRuntime()
const year = ref(dayjs().year())
const title = ref('Hello World')
const version = computed(() => app.value.version)
function surprise() {
// #ifdef APP-PLUS
{
name: 'LinkedList 大列表示例 - NVUE',
icon: 'emojione-letter-z',
page: `/pages/example/linkedlist-nvue/index?multiple=true`,
},
const orientation = plus.navigator.getOrientation()
if (orientation === 0) {
plus.screen.lockOrientation('landscape-primary')
} else if (orientation === 90) {
plus.screen.lockOrientation('portrait-primary')
}
Message.toast('🥳 surprise~')
// #endif
],
})
function goto(url: string) {
uni.navigateTo({ url })
// #ifndef APP-PLUS
Message.toast(`在手机上运行点击有惊喜~ ╰(*°▽°*)╯`)
// #endif
}
</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
:padding="[0, '32rpx']"
: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%;
const animate = ref()
function handUp() {
if (animate.value) {
return
}
.fui-swiper__box,
.fui-swiper__item,
.fui-scroll__box {
width: 100%;
Message.toast('👋🏻')
animate.value = 'animate-swing'
setTimeout(() => (animate.value = null), 1500)
}
</script>
.fui-list__view {
width: 100%;
min-height: 101%;
padding: 8rpx 32rpx 32rpx;
box-sizing: border-box;
}
<template>
<view class="content flex-center flex-col">
<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-list__item {
width: 100%;
height: 112rpx;
}
<fui-divider class="mt-5" />
<uni-icons type="hand-up" size="30" class="mt-3" :class="[animate]" @click="handUp" />
</view>
<fui-footer isFixed>
<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>
.fui-list__item text {
padding-left: 24rpx;
padding-right: 12rpx;
flex-shrink: 0;
<style lang="less" scoped>
.content {
height: calc(100vh - 100rpx);
}
.fui-item__icon-box {
width: 48rpx;
height: 48rpx;
.title {
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;
font-size: 36rpx;
color: #8f8f94;
}
</style>
types/components.d.ts
......@@ -124,10 +124,12 @@ declare module '@vue/runtime-core' {
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']
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']
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']
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']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
......
types/env.d.ts
/// <reference types="vite/client" />
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
import { defineComponent } from 'vue'
const component: ReturnType<typeof defineComponent>
export default component
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论