【项目_02】隐藏tabbar、对城市数据进行获取、处理、渲染到页面上、城市回显

【项目_02】隐藏tabbar、对城市数据进行获取、处理、渲染到页面上、城市回显 | 基于Vue3全家桶

news2024/11/25 13:30:33

💭💭

✨：隐藏tabbar、对城市数据进行获取、处理、渲染到页面上 | 旅途拾景

💟：东非不开森的主页

💜: 怎么会没有遗憾呢，一直向前就对了💜💜

🌸: 如有错误或不足之处，希望可以指正，非常感谢😉

旅途拾景

- 一、点击图标跳转城市页面
- - 1.1.跳转页面隐藏底部tabbar
  - 1.2.点击图标跳转页面
  - 1.3.配置搜索框
  - 1.3.tab标签页搭建
- 二、获取数据
- - 2.1封装网络请求
  - 2.2.请求对应数据
- 三、对数据处理使用
- - 3.1.直接使用
  - 3.2.动态使用
  - 3.3.通过store，在store获取数据
- 四、处理数据
- - 4.1.处理绑定index变为key
  - 4.2.根据key来获取相应的数据
  - - 4.2.1.直接获取
    - 2.2.2.将数据进行解构，再处理渲染
  - 4.2.3.总结
- 五、对数据进行页面渲染
- - 5.1.列表数据渲染
  - 5.2.热门数据渲染
  - 5.3.切换数据优化
  - 5.4.左边索引正确显示
- 六、选择城市回退和回显

一、点击图标跳转城市页面

1.1.跳转页面隐藏底部tabbar

建立一个页面，将页面配置到路由里面，在meta里面设置一下开关，

官方这样解释meta：
有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。

说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理，如果需要处理，按照自己想要的效果进行处理即可

在这里插入图片描述

这样跳转的时候就不会有tabbar了

1.2.点击图标跳转页面

绑定click事件
再用useRouter进行跳转路由

在这里插入图片描述

这样就可以跳转了

1.3.配置搜索框

用vant组件库
记得引用
点击事件等自行设置
搜索图标（修改第三方组件库，1.全局修改 2.deep，这里我用的是全局,我们可以在组件库找到这个样式，调试也可以找到）

在这里插入图片描述

common.css

这样就可以啦

1.3.tab标签页搭建

vant组件库，记得引入
修改下标横线颜色（这里采用的是deep）

在这里插入图片描述

预览效果如下：
请添加图片描述

二、获取数据

2.1封装网络请求

先安装axios

npm install axios

request下面的index.js

axios二次封装

import axios from 'axios'

import { BASE_URL, TIMEOUT } from './config'

class KKRequest {
    constructor(baseURL, timeout=10000) {
        this.instance = axios.create ({
            baseURL,
            timeout
        })
    }

    request(config) {
        return new Promise((resolve, reject) => {
            this.instance.request(config).then(res => {
                resolve(res.data)
            }).catch(err => {
                reject(err)
            })
        })
    }

    get(config) {
        return this.request({...config, method: "get"})
    }
    post(config) {
        return this.request({ ...config, method: "post" })
    }
}

export default new KKRequest(BASE_URL, TIMEOUT)