TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

最新文章

2021-04-06

页面优化-懒加载操作

页面优化-懒加载操作
一、概述通常在一个页面中会有很多图片,而首屏出现的图片可能就是几张。我们要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽。这也就通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载---到可视区域再加载。二、什么是懒加载懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户滚动到它们之前,可视区域外的图像不会加载。如下图所示,屏幕中能看到的img1、img2、img3、img4就会先加载显示。而img5、img6、是在可视区域外的,就会不加载显示。只有等到用户滑动进入到可视区域时,才会被加载。三、为什么要用懒加载提升用户的体验例如用户打开手机淘宝长页面的时候,如果页面上所有的图片都需要加载,由于图片数目较大,等待时间很长,,这就严重影响用户体验。而且更多时候其实用户都不会把整个网页都看完,所以没必要一次性将所有图片都加载完成。防止网站正常使用只可以有效防止在并发加载的资源过多会阻塞js的加载,影响网站的正常使用。四、懒加载原理首先将页面上的图片的src属性设为空字符串,而图片的真实路径则设置在data-origi...

Vue

12 阅读
2021年04月06日
12 阅读
0 评论
2021-04-06

Vant轮播图组件使用

Vant轮播图组件使用
一、基本使用Swipe轮播组件,直接添加使用。在script中,组件的导入,以及是获取轮播图数据<script> // 组件导入 import { Swipe, SwipeItem } from 'vant'; export default { name: 'homeView', components: { // 组件注册 [Swipe.name]: Swipe, [SwipeItem.name]: SwipeItem, }, data() { return { banner: [] // 轮播图数据源 } }, created() { // 注意这里会涉及到 this 指向问题 var that = this // 获取轮播图数据 this.$ajax.get('/json/banner.json') .then(...

Vue

15 阅读
2021年04月06日
15 阅读
0 评论
2021-04-06

Axios使用

Axios使用
一、Axios说明Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,Axios中文文档。Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。目前主流的 Vue 项目,都选择 axios  来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据。二、安装npm install axios三、项目中的使用关于axios插件的引入在main.js中引入,但是 axios 并不能Vue.use,只能每个需要发送请求的组件中即时引入。为了解决这个问题,是在引入 axios 之后,修改原型链。配置# main.js # 导入Axios插件 import Axios from 'axios' # 如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,在其他组件中就可以使用 Vue.prototype.$ajax = Axios;使用# 例如HomeView.vue组件中 export d...

Vue

11 阅读
2021年04月06日
11 阅读
0 评论
2021-04-06

Vant标签栏定制

Vant标签栏定制
一、Vant 标签栏在Vant组件库中,有给我们提供了一个标签栏组件。# App.vue组件中 <template> <van-tabbar v-model="active"> <van-tabbar-item icon="home-o">标签</van-tabbar-item> <van-tabbar-item icon="search" dot>标签</van-tabbar-item> <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item> <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item> &...

Vue

13 阅读
2021年04月06日
13 阅读
0 评论
2021-04-06

Vant导航栏定制

Vant导航栏定制
一、Vant导航栏组件在Vant组件库中,有给我们提供了一个导航栏组件,所以我们可以直接使用已经封装好的组件。# App.vue组件中 <template> # 组件使用 <van-nav-bar :title="title" /> </template> <script> # 导入需要使用的组件 import { NavBar } from 'vant'; export default{ name: 'navBar', components:{ # 组件声明 [NavBar.name]:NavBar }, data() { return { title: '全视眼镜商城' } }, } </script>二、导航栏样式说明首页中导...

Vue

13 阅读
2021年04月06日
13 阅读
0 评论