移动端找房项目笔记（二）–遇到的问题，以及知识点

1:deep()的使用场景

如果给当前组件的style 节点添加了scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，则需要使用:deep(class)，找到子组件的类，让子组件的类生效。

移动端找房项目笔记（二）--遇到的问题，以及知识点

2.修改第三方组件库的样式

移动端找房项目笔记（二）--遇到的问题，以及知识点

用插槽，插入自己的元素，那么在自己的作用域中直接修改这个元素。

移动端找房项目笔记（二）--遇到的问题，以及知识点
2. 全局定义变量，覆盖默认变量的值。

全局修改：在任何地方只要用到--van-tabbar-item-font-size,那么都会修改。

局部定义变量，覆盖默认变量的值。

只针对于.tabbar的子元素才生效

直接找到对应的子组件的选择器，进行修改。:deep(子组件的选择器)进行修改，直接修改CSS。

3.浏览器获取当前位置

1.调用navigator.geolocation.getCurrentPosition(（成功的回调）,（失败的回调）)

// 获取位置/城市
const positionClick = () => {
    navigator.geolocation.getCurrentPosition((res) => {
        console.log("获取位置成功：", res);
    }, err => {
        console.log("获取位置失败：", err);
    }, {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    })
}

移动端找房项目笔记（二）--遇到的问题，以及知识点

4.页面跳转后，tabber隐藏

移动端找房项目笔记（二）--遇到的问题，以及知识点
方案一：
1.首先在router下配置额外信息，useRoute()–>获取当前活跃的路由对象。

{
              path: "/city",
              component: () => import("@/views-(视图)/city/city.vue"),
              meta: {//额外信息
                  hideTabBer: true,
  }

2.通过v-if判断配置是否隐藏tabber组件

    <template>
      <div class="app">
        <router-view />
        <!-- 通过route中meta配置的额外信息，来控制是否显示tab-bar -->
        <tab-bar v-if="!route.meta.hideTabBer"></tab-bar>

      </div>
    </template>
    <script setup>
    import TabBar from "@/components-(抽取组件）/tab-bar/tabbar.vue"
    import { useRoute } from "vue-router";
    const route = useRoute();
    </script>
    <style scoped></style>

方案二：

1.通过设置当前组件样式达到一定高度，从而将tabbar覆盖。

    <template>
        <div class="city">
            <h2>city</h2>
            <template v-for="item in 100">
                <div>
                    {{ item }}
                </div>
            </template>
        </div>
    </template>
    <script setup>

    </script>
    <style lang="less" scoped>
    .city {
        position: relative;//相对定位可以设置z-index
        z-index: 9;
        height: 100vh;/*整个视口高度*/
        overflow-y: auto;
        /*overflow-y属性指定如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。*/
    }
    </style>

值	描述
visible	不裁剪内容，可能会显示在内容框之外。
hidden	裁剪内容 – 不提供滚动机制。
scroll	裁剪内容 – 提供滚动机制。
auto	如果溢出框，则应该提供滚动机制。
no-display	如果内容不适合内容框，则删除整个框。
no-content	如果内容不适合内容框，则隐藏整个内容。
注：可以将样式抽取在common.css中，方便使用，直接在对应组件添加类名。

5.axios的封装

安装axios

npm install axios
直接在组件中发送网络请求的弊端

如果网络请求太多，那么页面组件中就包含大量的对于网络请求的数据和数据的处理逻辑
如果页面封装了很多的子组件，子组件需要这些数据，我们需要一步步将数据传递过去（props）

发送网络请求

网络请求在store中单独进行管理，在store拿到数据，再把数据传递给原来的组件。

    const cityStore = useCityStore();
    // 发送网络请求！
    cityStore.fetchAllCitesData();//在store里调用service中发送网络请求的函数，拿数据存在store中的state里。
    const { allCities } = storeToRefs(cityStore);//调用storeToRefs(),让数据成为响应式数据
    console.log(allCities);

整体逻辑

移动端找房项目笔记（二）--遇到的问题，以及知识点

6.顶部栏定位

移动端找房项目笔记（二）--遇到的问题，以及知识点

方案一：采用top固定定位可以实现（不推荐）,滚动条不协调

    .top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    .content{
        margin-top: 98px;
    }
    }

移动端找房项目笔记（二）--遇到的问题，以及知识点
方案二: 布局滚动（推荐）
让下方的内容有固定的高度，再设置overflow-y: auto;

    .content{
        height: calc(100vh - 98px);
        overflow-y: auto;
    }

7.日历处理，时间日期选择功能

移动端找房项目笔记（二）--遇到的问题，以及知识点

Vant 4 日历组件的基本使用：
计算时间差

移动端找房项目笔记（二）--遇到的问题，以及知识点

8.日期格式化、动态计算时间的库dayjs

1.安装

    npm install dayjs

2.封装utils函数,以便在组件中直接调用

    import dayjs from "dayjs";
    //计算日期
    export function formatMonthDay(date) {
        // 传入日期，通过MM，DD做月份的格式化
        return dayjs(date).format("MM日DD日");
    }
    // 计算时间差
    export function getDiffDate(startDate, endDate) {
        return dayjs(endDate).diff(startDate, "day")
    }