代码拉取完成,页面将自动刷新
├─api 封装的接口入口 api
├─colorui 高颜值的 css 组件库
├─components 公共组件
├─mixin 全局混入
├─mock 本地mock文件
├─pages 页面文件
├─static 静态文件
│ └─images 图片目录
├─store VueX 根据需求选用
│ ├─index.js VueX 入口文件
│ └─modules VueX 分模块目录
├─utils 工具目录
│ ├─http.js 封装的请求
│ └─paymoney 封装的微信支付
├─uview-ui 高性能多平台快速开发的UI框架
├─.eslintignore eslint配置忽略文件
├─App.vue
├─main.js 主入口
├─pages.json 页面配置
├─template.h5.html h5 模板文件(不要修改)
├─uni.scss
└─vue.config.js vue 配置文件
pages.json
本模板自定义了顶部导航和底部导航。在性能上可能不及原生,但是扩展性和可塑性更强。可根据需要自行选用
{
// 全局挂载uView 组件
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
"pages": [
{
"path": "pages/home/home",
"style": {
// navigationBarTitleText 本模板没有用原生的navBar 写不写都行
// "navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uView",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
// 设置配置自定义 tabBar
"navigationStyle": "custom"
},
"condition": { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "", //模式名称
"path": "", //启动页面,必选
"query": "" //启动参数,在页面的onLoad函数里面得到
}]
}
}
/pages/home/home
home 页面是入口页面,入口页面做成了单页。底部导航栏的切换通过动态显示组件的形式来展现。
<template>
<view class="container">
<loadingCat v-if="!readyed"></loadingCat>
<u-navbar v-if="readyed" :is-back="false" :title="title" :background="background" title-color="#ffffff"></u-navbar>
<view class="main" v-if="readyed" >
<dog v-show="current === 0"></dog>
<cat v-show="current === 1"></cat>
<petFood v-show="current === 2"></petFood>
<handmade v-show="current === 3"></handmade>
<center v-show="current === 4"></center>
</view>
<u-tabbar
v-if="readyed"
v-model="current"
:list="tabBarList"
active-color="#3399CC"
inactive-color="#333333"
@change="changeTab"
height="128"
icon-size="60"></u-tabbar>
</view>
</template>
<script>
import dog from "@v/home/tabBar/dog/dog";
import cat from "@v/home/tabBar/cat/cat";
import petFood from "@v/home/tabBar/petFood/petFood";
import handmade from "@v/home/tabBar/handmade/handmade";
import center from "@v/home/tabBar/center/center";
// 加载中动画,根据需求自行更改或者不用
import loadingCat from "@c/loading_cat";
export default {
components: {
dog,
cat,
petFood,
handmade,
center,
loadingCat
},
data() {
return {
title: '傻狗',
current: 0,
readyed:false,
background: {
backgroundColor: '#6DABDE',
// 导航栏背景图
// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
// 还可以设置背景图size属性
// backgroundSize: 'cover',
// 渐变色
// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
},
tabBarList: [{
iconPath: "/static/images/dog.png",
selectedIconPath: "/static/images/dog.png",
text: '傻狗',
count: 2,
isDot: true,
customIcon: false,
},
{
iconPath: "/static/images/cat.png",
selectedIconPath: "/static/images/cat.png",
text: '懒猫',
customIcon: false,
},
{
iconPath: "/static/images/petFood.png",
selectedIconPath: "/static/images/petFood.png",
text: '宠物粮',
customIcon: false,
},
{
iconPath: "/static/images/handmade.png",
selectedIconPath: "/static/images/handmade.png",
text: '手工制品',
count: 23,
isDot: false,
customIcon: false,
},
{
iconPath: "/static/images/center.png",
selectedIconPath: "/static/images/center.png",
text: '我的',
count: 23,
isDot: false,
customIcon: false,
}
]
}
},
created() {
// 模拟资源加载
setTimeout(()=>{
this.readyed = true;
},1500)
},
methods: {
// 切换地板导航栏
changeTab(index) {
console.log(index)
this.current = index;
this.title = this.tabBarList[index].text;
}
}
}
</script>
<style lang="scss" scoped>
.container {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.main {
width: 100%;
padding: 0 30rpx;
}
@font-face {
/* 字体加载 微信小程序上可以全局加载,uni上需要每个页面都引入一次,特别消耗性能。尽可能减少字体包的下载 */
font-family: "zkklt";
src: url('https://sungd.github.io/Pacifico.ttf');
}
.test {
font-family: 'zkklt';
font-size: 60rpx;
}
</style>
main.js
import Vue from 'vue';
import App from './App';
import store from './store';
Vue.config.productionTip = false
App.mpType = 'app'
// 引入全局uView
import uView from 'uview-ui'
Vue.use(uView);
// 全局混入分享
import mixinShare from './mixin/share.js';
Vue.mixin(mixinShare)
const app = new Vue({
...App,
// 挂载vuex
store
})
app.$mount()
manifest.json
uni的配置文件,通过 HBuilder 编辑器可使用可视化界面进行配置。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。