网站检测器,crm免费,做公司网站需要提供的资料,网站跳出率高的原因背景
界面很长#xff0c;屏幕不能一下装下所有内容#xff0c;如果以进入首页就把所有内容都加载完的话所需时间较长#xff0c;会影响用户体验#xff0c;所以可以当用户浏览到时再去加载。
代码
新建index.ts文件
src下新建directives文件夹#xff0c;并新建Index…背景
界面很长屏幕不能一下装下所有内容如果以进入首页就把所有内容都加载完的话所需时间较长会影响用户体验所以可以当用户浏览到时再去加载。
代码
新建index.ts文件
src下新建directives文件夹并新建Index.ts文件
import { useIntersectionObserver } from vueuse/core
import { install } from element-plusexport const lazyPlugin {install(app){// 懒加载指令逻辑// 定义全局指令// 这个属于图片懒加载部分app.directive(img-lazy,{mounted(el, binding){// el: 指令绑定的那个元素 img// binding: binding.value 指令等于号后面绑定的表达式的值 图片urlconst {stop} useIntersectionObserver(el,([{isIntersecting}]) {// 第一次赋值之后就不用再监听了 - stop()// 防止内存的浪费if(isIntersecting){el.src binding.valuestop()}},)}})}
}修改main.ts文件
import ./assets/main.cssimport { createApp } from vue
import { createPinia } from piniaimport App from ./App.vue
import router from ./router// 引入初始化样式文件
import /styles/common.scss
// 引入图片延迟加载
import { lazyPlugin } from /directives/indexconst app createApp(App)app.use(createPinia())
app.use(router)
// 使用图片延迟加载插件
app.use(lazyPlugin)app.mount(#app)
HomeHot.vue
index.ts文件中定义的名字叫img-lazy在这里使用的时候用 v-img-lazy后面跟图片对应路径
script setup langts nameHomeHot
import HomePanel from ./HomePanel.vue
import { getHotAPI } from /apis/home
import { onMounted, ref } from vueconst hotList ref([])
const getHotList async () {const res await getHotAPI()console.log(res)hotList.value res.data.result
}
onMounted(() getHotList())/scripttemplateHomePanel title人气推荐 sub-title人气爆款 不容错过ul classgoods-listli v-foritem in hotList :keyitem.idRouterLink to/img v-img-lazyitem.picture altp classname{{ item.title }}/pp classdesc{{ item.alt }}/p/RouterLink/li/ul/HomePanel
/templatestyle scoped langscss
.goods-list {display: flex;justify-content: space-between;height: 426px;li {width: 306px;height: 406px;transition: all .5s;:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 306px;height: 306px;}p {font-size: 22px;padding-top: 12px;text-align: center;}.desc {color: #999;font-size: 18px;}}
}
/style
