【项目_04】加载时动画效果、跳转详情页、轮播图自定义指示器、搭建详情页 | 基于Vue3全家桶

10 篇文章 1 订阅

💭💭

✨:加载时动画效果、跳转详情页、轮播图自定义指示器、搭建详情页 | 旅途拾景

💟:东非不开森的主页

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

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

一、发送网络请求时出现动画效果

1.1.加载的时候动画效果

  • 我们需要先把这个动画写出来, 就是他的布局还有显示
  • 然后再在网络请求中控制加载
  • 因为每一个网络请求都会用到
  • 所以可以写在总的网络请求里面,并共享整个加载

总页面app.vue
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.2.如何监控整个应用进行网络请求,并且显示动画界面?

  • 在对axios的封装中 利用拦截器(interceptors)的请求和响应阶段可以进行很好的控制

    • 对实例添加请求拦截和响应拦截
    • 当请求成功 就利用变量(isLoading=true)来实现动画的加载
    • 当请求响应成功 就把(isLoading=false)来结束动画的加载
const mainStore = useMainStore()

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

    this.instance.interceptors.request.use(config => {
      mainStore.isLoading = true
      return config
    }, err => {
      return err
    })
    this.instance.interceptors.response.use(res => {
      mainStore.isLoading = false
      return res
    }, err => {
      mainStore.isLoading = false
      return err
    })
  }
}

二、详情页

2.1.跳转至详情页(根据id匹配)

  • 在组件也可以绑定点击事件,其实这里渲染的是组件的根元素上(这里组件必须只有一个根元素才可以)

  • 然后进行传递参数id 用useRouter

  • 配置路由(这里使用的是动态路由)

用$route.params.id来接收id
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
请添加图片描述

动态路由:
在这里插入图片描述
在这里插入图片描述

2.1.1 页面跳转如何进行数据的传递?
  • 使用动态路由 params 参数
  • 使用路由的 query 查询字符串参数
  • 使用Vuex 或者 Pinia

2.2.详情页navbar配置

  • 用的是vant组件库

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、轮播图

3.1.轮播图数据请求并展示

  • 我们可以把轮播图写在一个组件里面
  • 复杂数据我们可以用computed

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2.自定义轮播图指示器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.3.自定义轮播图指示器完整搭建

  1. 我们要根据不同的active展示对应的名字
  2. 但是类别不一定
  3. 所以可以把每一种类别放在一个对象里面
  4. 通过键值对的方式进行映射 再去展示数据

未处理前数据:
在这里插入图片描述
在这里插入图片描述

处理后数据

在这里插入图片描述

在这里插入图片描述

获取数据

  1. 二次循环在这里插入图片描述
  2. 一次循环
    在这里插入图片描述
    数据展示
    我们需要判断当前活跃的index和类别的index
    在这里插入图片描述

去掉数据的【】:

  • replace

在这里插入图片描述

  • 正则

在这里插入图片描述

  • 获取active的动态索引

在这里插入图片描述
在这里插入图片描述
请添加图片描述

四、搭建页面

4.1.搭建infos

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
css慢慢调吧

4.2.搭建房屋设施

在这里插入图片描述

  • 我们可以把这个写成组件进行复用
  • 分为上中下

在这里插入图片描述
在这里插入图片描述

  • 然后再其它部分就可以用这个组件了
  • 大致的数据

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

4.3.搭建房东详情

在这里插入图片描述

  • 分析一下这个页面
  • 我们可以套用刚刚封装的那个组件
  • 中间内容分为上中下

再来分析一下数据
找到自己想要的数据
再进行渲染
在这里插入图片描述
在这里插入图片描述

搭建
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我感觉自己写的有点问题,害。。。。

4.4.集成百度地图

  1. 先有百度地图开发者账号
  2. 看文档
  3. 引入地图
  4. 在调整自己想要的东西

index.html
在这里插入图片描述
引入组件,传递动态的经纬度
在这里插入图片描述

  • 我们需要在生命周期onMounted中挂载
  • 通过ref获取实例

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东非不开森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值