- Renderização de Página - Página Inicial ==========
- Componente de Visualização de Deslizamento (Swiper)
Utilizando texto com fundo colorido ao invés de imagens de banner para reduzir esforço futuro.
Código em index.vue:
<template>
<view class="container">
<swiper :show-indicators="true" :auto-play="true" class="carousel">
<swiper-item v-for="(slide, index) in slides" :key="index">
<view class="slide-content">{{ slide }}</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
slides: [
'Neve cai sobre as águas',
'Amanhecer envia o viajante',
'Pergunte aos amigos de Luoyang',
'Uma mente pura dentro do recipiente de jade'
]
}
}
}
</script>
<style>
.carousel {
width: 100%;
height: 400upx;
}
.slide-content {
background-color: #E4E7ED;
width: 100%;
height: 100%;
color: #000000;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
</style>
- Integração da Biblioteca uView
Biblioteca de componentes UI encontrada no mercado de plugins do uni-app.
Link de download:
https://ext.dcloud.net.cn/plugin?id=1593
Documenatção oficial:
https://www.uviewui.com/components/intro.html
Cópias da pasta uview-ui para o diretório do projeto
1. Importação no main.js:
import UView from 'uview-ui';
Vue.use(UView);
- Importação de estilos básicos no App.vue (necessário declarar suporte a scss)
<style lang="scss">
@import "uview-ui/index.scss";
</style>
- Importação de variáveis scss globais no uni.scss
/* uni.scss */
@import "uview-ui/theme.scss";
- Configuração de regras easycom no pages.json (importação por demanda)
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}
- Barra de Noitficação
Código em index.vue:
<template>
<view class="container">
<u-notice-bar mode="horizontal" type="none" :list="notifications"></u-notice-bar>
</view>
</template>
<script>
export default {
data() {
return {
notifications: [
'Neve cai sobre as águas',
'Amanhecer envia o viajante',
'Pergunte aos amigos de Luoyang',
'Uma mente pura dentro do recipiente de jade'
]
}
}
}
</script>
- Layout de Grade (Grid)
Código em index.vue:
<template>
<view class="container">
<u-grid :col="3">
<u-grid-item bg-color="#f4f4f5">
<u-icon name="document" :size="60"></u-icon>
<view class="grid-text">Regulamentos</view>
</u-grid-item>
<u-grid-item>
<image src="https://cdn.uviewui.com/uview/grid/hot5.png" class="badge-icon"></image>
<u-icon name="star" :size="60"></u-icon>
<view class="grid-text">Entrar</view>
</u-grid-item>
<u-grid-item>
<image src="https://cdn.uviewui.com/uview/grid/hot6.png" class="badge-icon"></image>
<u-icon name="settings" :size="60"></u-icon>
<view class="grid-text">Feedback</view>
</u-grid-item>
<u-grid-item bg-color="#f4f4f5">
<u-icon name="user-group" :size="60"></u-icon>
<view class="grid-text">Comunidade</view>
</u-grid-item>
<u-grid-item bg-color="#f4f4f5">
<u-icon name="gift" :size="60" color="#fa3534"></u-icon>
<view class="grid-text">Apoio</view>
</u-grid-item>
</u-grid>
</view>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
.badge-icon {
position: absolute;
top: 30rpx;
right: 30rpx;
width: 40rpx;
height: 40rpx;
}
</style>
- Inserção de Informações de Direitos Autorais
Utilizando Divider e Gap:
Código em index.vue:
<template>
<view class="container">
<u-gap height="80" bg-color="#fff"></u-gap>
<u-divider color="#6d6d6d" half-width="80" border-color="#6d6d6d">© Desenvolvido por [Seu Nome] para Literatura Online</u-divider>
<u-gap height="80" bg-color="#fff"></u-gap>
</view>
</template>
Código finalizado:
<template>
<view class="container">
<swiper :show-indicators="true" :auto-play="true" class="carousel">
<swiper-item v-for="(slide, index) in slides" :key="index">
<view class="slide-content">{{ slide }}</view>
</swiper-item>
</swiper>
<u-notice-bar mode="horizontal" type="none" :list="notifications"></u-notice-bar>
<u-grid :col="3">
<u-grid-item bg-color="#f4f4f5">
<u-icon name="document" :size="60"></u-icon>
<view class="grid-text">Regulamentos</view>
</u-grid-item>
<u-grid-item>
<image src="https://cdn.uviewui.com/uview/grid/hot5.png" class="badge-icon"></image>
<u-icon name="star" :size="60"></u-icon>
<view class="grid-text">Entrar</view>
</u-grid-item>
<u-grid-item>
<image src="https://cdn.uviewui.com/uview/grid/hot6.png" class="badge-icon"></image>
<u-icon name="settings" :size="60"></u-icon>
<view class="grid-text">Feedback</view>
</u-grid-item>
<u-grid-item bg-color="#f4f4f5">
<u-icon name="user-group" :size="60"></u-icon>
<view class="grid-text">Comunidade</view>
</u-grid-item>
<u-grid-item bg-color="#f4f4f5">
<u-icon name="gift" :size="60" color="#fa3534"></u-icon>
<view class="grid-text">Apoio</view>
</u-grid-item>
</u-grid>
<u-gap height="80" bg-color="#fff"></u-gap>
<u-divider color="#6d6d6d" half-width="80" border-color="#6d6d6d">© Desenvolvido por [Seu Nome] para Literatura Online</u-divider>
<u-gap height="80" bg-color="#fff"></u-gap>
</view>
</template>
<script>
export default {
data() {
return {
slides: [
'Neve cai sobre as águas',
'Amanhecer envia o viajante',
'Pergunte aos amigos de Luoyang',
'Uma mente pura dentro do recipiente de jade'
],
notifications: [
'Neve cai sobre as águas',
'Amanhecer envia o viajante',
'Pergunte aos amigos de Luoyang',
'Uma mente pura dentro do recipiente de jade'
]
}
}
}
</script>
<style>
.carousel {
width: 100%;
height: 400upx;
}
.slide-content {
background-color: #E4E7ED;
width: 100%;
height: 100%;
color: #000000;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.badge-icon {
position: absolute;
top: 30rpx;
right: 30rpx;
width: 40rpx;
height: 40rpx;
}
</style>