当前位置: 首页> 房产> 市场 > 网站收录慢_平台商城网站开发_百度导航最新版本免费下载_视频外链在线生成

网站收录慢_平台商城网站开发_百度导航最新版本免费下载_视频外链在线生成

时间:2025/7/12 3:11:46来源:https://blog.csdn.net/xiaoxiannvh/article/details/146769805 浏览次数:1次
网站收录慢_平台商城网站开发_百度导航最新版本免费下载_视频外链在线生成

vue3搭建实战项目笔记三

      • 3.1.行高偏移问题
      • 3.2.谷歌浏览器上不能定位
        • 3.2.2 移动端css隐藏滚动条
      • 3.3.获取列表的数据
        • 3.3.1 服务器返回十万条数据
        • 3.3.2 分页展示数据
        • 3.3.2 防止展示数据为空报错
      • 3.4.上拉加载数据
        • 3.4.1 加载更多数据
        • 3.4.2 监听页面滚动到底部
        • 3.4.3 监听滚动的时机
        • 3.4.4 监听滚动抽取成hooks
        • 3.4.5 useScrollHook在页面中使用
        • 3.4.6 监听滚动距离scrollTop
        • 3.4.7 优化scrollHook
      • 3.5.显示头部搜索
      • 3.6 解决手动切换路由不更新tarBar的问题
      • 3.7 开始时间和结束的共享

3.1.行高偏移问题

  • 3.1.1.引入了normalize.css,引起的行高偏差问题
    - 1.产生的原因:
    • 由于引入了normalize.css, 所以html的line-height: 1.15;
    • line-height是会继承的,line-height没有设置单位,相当于是fontSize的倍数
    • 例如:
          line-height: 2; => 12*2 = 24pxfont-size: 12px;
      
    • line-height去掉文字的高度后再进行平方,1.15*12 = 13.8
    • 去掉文字高度后,只剩下1.8 无法平方,可能有些浏览器会下面来个1,上面来一个0(0.8做一个向下取证Math.floor(0.8))
- 2.防止行高偏差的解决方案:在assets文件夹下的css目录下的reset.css进行html行高的重置```csshtml {/* 目前大多数浏览器的line-height:1.2是比较常见的 */line-height: 1.2; }```
- 3.补充:中文的文字会向上偏移一点点,英文反而是有一点点向下沉的

3.2.谷歌浏览器上不能定位

  • 1.在Edge浏览器测试定位
    Edge浏览器在渲染界面的时候,渲染的引擎对应的chrome里面的Blink是一样的
    在实现一些API的时候不一样的
  • 2.拿到对应的经纬度发送给服务器(或第三方服务器百度,高德)并返回城市信息
    • longitude:113.2643
    • latitude: 23.129
  • 3.分析谷歌浏览器不能定位的原因:
    • 3.1.如果电脑可以连上国外的服务器,就可以获取到对应的定位信息
    • 3.2.edge浏览器和chrome浏览器对于geolocation.getCurrentPosition()的实现不一样
      • edge:
      • 获取当前位置信息,是直接获取下电脑有没有获取到当前用户的位置,如果有获取的到直接返回当前用户位置
      • chrome:
      • 拿到当前电脑的IP地址,把IP地址发送给谷歌服务器,要求必须先连接上谷歌的服务器,
        在国内是连接不上谷歌服务器的,连接不上就没法根据IP地址分析出当前位置,无法返回对应的地址信息
      • 手机上是可以正常获取的
    • 3.3.解决:
      在edge、手机上是可以正常获取到定位信息
  • 4.参考文档:https://www.w3.org/TR/geolocation/#introduction
    • geolocationAPI是一个高度抽象的接口,就是不告诉内部怎么实现的
    • 内部是不管不规定是如何通过IP地址、GPS、RFID、WiFi、蓝牙等设备信息来分析出当前用户的位置信息,只是和设备的速度有关联
    • 在谷歌PC端,谷歌是通过IP地址来分析出当前用户的位置信息,不保证返回的一定是当前设备的真实位置
  • 5.补充:sdk - software development kit
  • 完整代码:
        navigator.geolocation.getCurrentPosition((renderToString) => {// latitude// 纬度// longitude// 经度console.log('获取位置成功:', renderToString);}, (res) => {console.log('获取位置失败:', res);},{enableHighAccuracy: true,timeout: 5000,maximumAge: 0,})
    
3.2.2 移动端css隐藏滚动条
  ::webkit-scrollbar {display: none;}

3.3.获取列表的数据

3.3.1 服务器返回十万条数据
    1. 在当前应用程序里开一个对应的线程(多线程的东西-webworker)
    1. 虚拟列表,比较少见
    1. 一般在整个项目架构的时候不推荐返回十万条数据,除非非常需要,最好不要放在前端处理十万条数据,前端出处理十万条数据,会让浏览器变得非常卡,对用户体验不好,让服务器去处理去占用对应的资源,让前端来做展示(用户浏览器占用过多资源的话,会造成卡顿,体验不好,最好不要这么做)
  • 两种做法如下:
    1. 引入第三方库 axios,直接在组件页面直接使用axios发送网络请求,但是这样来做不好,不利于代码维护
    2. 最好对axios做一层封装,不管是复用性、可用性、可维护性,甚至框架的替换都是更方便的
3.3.2 分页展示数据
  • 1.分页请求传参
    页码和每页条数 page, size (服务器有做分页的情况下)
    每页条数和偏移 size offset=0,30,60 (服务器没有做分页的情况下)
3.3.2 防止展示数据为空报错
- 1.使用可选链?.```javascriptconst { userInfo } = getUserInfo()console.log(userInfo?.image?.url)```
- 2.使用v-if```html<div v-if="userInfo.image">{{userInfo.image.url}}</div>```

3.4.上拉加载数据

3.4.1 加载更多数据
- 1.在homeStore中定义一个页码来记录当前第几页,默认为第一页
- 2.每次点击加载更多,发送请求,请求成功后, 把数据添加到数组中,然后重新渲染页面, 然后页码+1。
- 3.代码如下:```javascript// 1.service.jsexport function getHomeCategories () {return hyRequest.get({ url: "/home/categories" })}// 2.homeStore.jsimport { defineStore } from "pinia";import { getHomeHouseList} from "@/service";const useHomeStore = defineStore("home", {state: () => ({currentPage: 1,houselist: []}),actions: {async fetchHouseListData () {const res = await getHomeHouseList(this.currentPage)this.houselist.push(...res.data)this.currentPage++}}})export default useHomeStore```
3.4.2 监听页面滚动到底部
- 1. 页面为什么会滚动- 1.1.window窗口滚动(整个页面所有内容超过100%并且有滚动条)- 1.2.元素滚动(元素设置overflow-y: auto)
- 2.监听滚动```javascript// window窗口的滚动window.addEventListener('scroll', () => {})// 元素的滚动divEl.addEventListener('scroll', () => {})```
- 3.监听滚动到底部- 3.1.想要知道滚动了多少区域 - 3.1.1. 它其实是我们对应文档的一个滚动,整个窗口之所以可以滚动,是因为它的文档变得非常的长,当往上面滚动的时候,有一个往上滚动的高度- 3.1.2. 往上滚动的高度叫做scrollTop- 3.2.怎么知道滚动到了底部- 3.2.1. 可以拿到整个文档可以滚动的区域scrollHeight(也相当于整个文档的高度)- 3.2.2. 拿到客户端的高度,如果客户端的高度 + scrollTop >= scrollHeight 说明滚动到底部- 3.3.代码如下: ```javascript// 监听窗口的滚动window.addEventListener('scroll', () => {const clientHeight = document.documentElement.clientHeightconst scrollTop = document.documentElement.scrollTopconst scrollHeight = document.documentElement.scrollHeightif (clientHeight + scrollTop >= scrollHeight) {// 如果说到达底部了,就加载更多数据homeStore.fetchHouseListData()}})```
3.4.3 监听滚动的时机
- 1. 当加载页面时,监听滚动```javascriptonMounted(() => {window.addEventListener('scroll', scrollListenerHandler)})```
- 2. 当离开页面时,移除监听滚动(原因:页面之间都监听了window的滚动,会影响下一个页面的监听滚动,所以需要再卸载页面移除滚动事件)```javascriptonUnmounted(() => {window.removeEventListener('scroll', scrollListenerHandler)}) ```
3.4.4 监听滚动抽取成hooks
- 在hooks中封装一个useScroll(原因:别的页面也需要进行类似的监听)- 1.1.判断滚动到底部的两种做法:1. 传入一个回调函数,一旦滚动到底部执行回调函数 ```javascriptimport { ref, onActivated, onDeactivated, onMounted, onUnmounted } from 'vue'export default function useScroll(reachBottomCB) {const scrollListenerHandler = () => {const clientHeight = document.documentElement.clientHeightconst scrollTop = document.documentElement.scrollTopconst scrollHeight = document.documentElement.scrollHeightif (clientHeight + scrollTop >= scrollHeight) {if(reachBottomCB) {reachBottomCB()}}}onMounted(() => {window.addEventListener('scroll', scrollListenerHandler)})onUnmounted(() => {window.removeEventListener('scroll', scrollListenerHandler)}) onActivated(() => {window.addEventListener('scroll', scrollListenerHandler)})onDeactivated(() => {window.removeEventListener('scroll', scrollListenerHandler)})}```2. 返回一个变量,代表是否滚动到底部原因:回调比较多的时候,不好管理,更好管理的是变量```javascriptimport { ref, onActivated, onDeactivated, onMounted, onUnmounted } from 'vue'export default function useScroll() {const isReachBottom = ref(false)const scrollListenerHandler = () => {const clientHeight = document.documentElement.clientHeightconst scrollTop = document.documentElement.scrollTopconst scrollHeight = document.documentElement.scrollHeightif (clientHeight + scrollTop >= scrollHeight) {isReachBottom.value = false}}onMounted(() => {window.addEventListener('scroll', scrollListenerHandler)})onUnmounted(() => {window.removeEventListener('scroll', scrollListenerHandler)}) onActivated(() => {window.addEventListener('scroll', scrollListenerHandler)})onDeactivated(() => {window.removeEventListener('scroll', scrollListenerHandler)})return {isReachBottom}}```
3.4.5 useScrollHook在页面中使用
  - 3.4.2.4.1. 回调函数形式```javascriptimport useScroll from '@/hooks/useScroll';// 监听是否滚动底部useScroll(() => {homeStore.fetchHouseListData()})```- 3.4.2.4.2. 返回一个变量```javascriptimport useScroll from '@/hooks/useScroll';// 拿到isReachBottom,然后监听isReachBottom为真的时候滚动到底部const { isReachBottom } = useScroll()// 监听是否滚动底部watch(isReachBottom, (newValue) => {if(newValue) {homeStore.fetchHouseListData().then(() => {isReachBottom.value = false})}})```
3.4.6 监听滚动距离scrollTop
  - 1.局部监听滚动距离放到全局上,返回把滚动距离返回出去- 2. 代码如下:```javascriptimport { ref, onActivated, onDeactivated, onMounted, onUnmounted } from 'vue'export default function useScroll() {const isReachBottom = ref(false)const clientHeight = ref(0) // 可见的高度const scrollTop = ref(0) // 滚动的距离const scrollHeight = ref(0) // 整个文档的可滚动的高度// 监听窗口的滚动const scrollListenerHandler = (reachBottomCB) => {clientHeight.value = document.documentElement.clientHeightscrollTop.value = document.documentElement.scrollTopscrollHeight.value = document.documentElement.scrollHeightif (clientHeight.value + scrollTop.value >= scrollHeight.value) {isReachBottom.value = true}}onMounted(() => {window.addEventListener('scroll', scrollListenerHandler)})onUnmounted(() => {window.removeEventListener('scroll', scrollListenerHandler)}) onActivated(() => {window.addEventListener('scroll', scrollListenerHandler)})onDeactivated(() => {window.removeEventListener('scroll', scrollListenerHandler)})return {isReachBottom,clientHeight,scrollTop,scrollHeight,}}```
3.4.7 优化scrollHook
- 使用使用underscore库节流优化scrollHook- 1.监听滚动时,发现函数执行的次数很频繁,使用节流处理,减少函数执行次数。- 2.使用underscore.js中的throttle函数,对scrollHook进行优化。- 3.安装underscore: npm install underscore- 4.使用:import { throttle } from 'underscore'```javascriptimport { ref, onActivated, onDeactivated, onMounted, onUnmounted } from 'vue'import { throttle } from 'underscore'// 执行频率太高使用:防抖/节流// 防抖:本来准备去执行一个东西,但是发现又触发了,然后把这个事件不断的延后,直到最后一次才执行// 节流:在单位时间内执行一个函数是非常频繁的,规定一个时间执行一次函数,每间隔一个时间执行一次函数export default function useScroll() {const isReachBottom = ref(false)const clientHeight = ref(0) // 可见的高度const scrollTop = ref(0) // 滚动的距离const scrollHeight = ref(0) // 整个文档的可滚动的高度const scrollListenerHandler = throttle(() => {clientHeight.value = document.documentElement.clientHeightscrollTop.value = document.documentElement.scrollTopscrollHeight.value = document.documentElement.scrollHeightif (clientHeight.value + scrollTop.value >= scrollHeight.value) {isReachBottom.value = true}}, 100)onMounted(() => {window.addEventListener('scroll', scrollListenerHandler)})onUnmounted(() => {window.removeEventListener('scroll', scrollListenerHandler)}) onActivated(() => {window.addEventListener('scroll', scrollListenerHandler)})onDeactivated(() => {window.removeEventListener('scroll', scrollListenerHandler)})return {isReachBottom,clientHeight,scrollTop,scrollHeight,}}```

3.5.显示头部搜索

-3.4.3.7.滚动到100显示头部搜索框
```javascript
import { watch, ref, computed } from ‘vue’;
import useScroll from ‘@/hooks/useScroll’;
const { isReachBottom, scrollTop } = useScroll()

    // const isShowSearchBar = ref(false)// 1.监听scrollTop的距离// watch(scrollTop, (newScrollTop) => {//  isShowSearchBar.value = newScrollTop > 100// })// 当一个可响应式数据依赖(影响)另外一个可响应式数据的时候,使用计算函数const isShowSearchBar = computed(() => {return scrollTop.value >= 100})```

3.6 解决手动切换路由不更新tarBar的问题

  ```javascript// 1.开启路由模式<template><van-tabbar v-model="currentIndex" active-color="#ff9854" route></van-tabbar></template>// 2.监听路由变化,找到对应的索引,并修改currentIndeximport { ref, watch } from 'vue';const route = useRoute()watch(route, (newRoute) => {const index = tabbarData.findIndex(item => item.path === newRoute.path)if(index === -1) returncurrentIndex.value = index})```

3.7 开始时间和结束的共享

```javascript// 抽取到一个公共的mainStore中// src/store/main.jsimport { defineStore } from "pinia";const startDate = new Date()const endDate = new Date()endDate.setDate(startDate.getDate()+1) // 或者  nowDate.getTime() + 24*60*60*1000const useMainStore = defineStore('main', {state: () => ({token: '',startDate: startDate,endDate: endDate})})export default useMainStore// src/views/cpns/home-search-box.vue// 日期范围处理(页面中使用)import { computed, ref } from 'vue'import { storeToRefs } from 'pinia'import { formatMonthDay, getDiffDays } from '@/utils/format_date';import useMainStore from '@/stores/modules/main';const calendarShow = ref(false)const mainStore = useMainStore()const { startDate, endDate} = storeToRefs(mainStore)// formatMonthDay格式日期,默认格式为MM月DD日const startDateStr = computed(() => formatMonthDay(startDate.value))const endDateStr = computed(() => formatMonthDay(endDate.value))const stayCount = ref(getDiffDays(startDate.value, endDate.value))const onConfirm = (value) => {// 1.设置日期const selectStartDate = value[0]const selectEndDate = value[1]mainStore.startDate = selectStartDatemainStore.endDate = selectEndDatestayCount.value = getDiffDays(selectStartDate, selectEndDate)// 2.隐藏日历calendarShow.value = false}// src/components/search-bar.vue// 页面中使用import useMainStore from '@/stores/modules/main';import { formatMonthDay } from '@/utils/format_date';import { computed } from 'vue';import { storeToRefs } from 'pinia';const mainStore = useMainStore()const { startDate, endDate } = storeToRefs(mainStore)const startDateStr = computed(() => formatMonthDay(startDate.value, 'MM.DD'))  const endDateStr = computed(() => formatMonthDay(endDate.value, 'MM.DD'))```
关键字:网站收录慢_平台商城网站开发_百度导航最新版本免费下载_视频外链在线生成

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: