mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 架构升级
This commit is contained in:
@@ -0,0 +1,152 @@
|
||||
# Pages Configuration
|
||||
|
||||
## pages.json 配置
|
||||
|
||||
在 UniApp 项目中,`pages.json` 是页面配置文件,需要正确配置以使用 uCharts。
|
||||
|
||||
### 基本配置
|
||||
|
||||
```json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
|
||||
}
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "UniApp",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"backgroundColor": "#f5f5f5"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 图表页面配置
|
||||
|
||||
```json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/chart/chart",
|
||||
"style": {
|
||||
"navigationBarTitleText": "图表",
|
||||
"navigationBarBackgroundColor": "#409EFF",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#f5f5f5"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 下拉刷新配置
|
||||
|
||||
如果图表页面需要下拉刷新:
|
||||
|
||||
```json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/chart/chart",
|
||||
"style": {
|
||||
"navigationBarTitleText": "图表",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
页面中处理下拉刷新:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<qiun-data-charts
|
||||
type="line"
|
||||
:opts="opts"
|
||||
:chartData="chartData"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartData: {},
|
||||
opts: {}
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// 刷新图表数据
|
||||
this.loadChartData()
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
}, 1000)
|
||||
},
|
||||
methods: {
|
||||
loadChartData() {
|
||||
// 加载图表数据
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 完整示例
|
||||
|
||||
```json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
|
||||
}
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chart/line",
|
||||
"style": {
|
||||
"navigationBarTitleText": "折线图"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chart/bar",
|
||||
"style": {
|
||||
"navigationBarTitleText": "柱状图"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "UniApp",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"backgroundColor": "#f5f5f5"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **easycom 配置**:必须在 pages.json 中配置 easycom
|
||||
2. **路径正确性**:确保组件路径正确
|
||||
3. **样式配置**:合理配置页面样式
|
||||
4. **平台差异**:注意不同平台的配置差异
|
||||
5. **性能优化**:合理配置下拉刷新和上拉加载
|
||||
Reference in New Issue
Block a user