考虑到浏览器的兼容性，可使用三种语法获取页面高度
- 1、window.pageYOffset页面Y轴的偏移量
- 2、document.documentElement.scrollTop 文档的html元素的高度
- 3、document.body.scrollTop 在IE下，获取html的高度
//该语句判断是否需要进行fixed定位
let scrollTop = window.pageYOffset||document.documentElement。scrollTop|| document.body.scrollTop;
initHeight(){
this.isFixed = scrollTop > 152?true:false;
}
三种路由跳转方式
- 1
this.$router.push('/order/pay');
- 2
this.$router.push({
name:'order-pay',//name这里指路由的名称
query:{
orderNo//这里是传递的参数
}
})
- 3
this.$router.push({
path: "/order/pay", //path是路径
params: {
orderNo
}
});
第二种和第三种的区别是：
第二种使用的是路由的名称跳转；第三种使用的是路径跳转 query传参和params传参的区别是：query传参可以将参数添加到地址栏里面去
使用svg图片优点：
- 1、高清，不失真
- 2、不占用带宽，拉取时不是一个真实的图片地址栏，只是一串代码，没有真实的图片地址
- 3、svg代码量相对图片要小很多，至少不用拉请求
- 4、是前端性能优化的一部分
- 5、用svg替换一部分图片，减少请求数量
路由按需加载方案，两种：
在router.js文件中修改路由,
- 1、利用Promise语法实现路由按需加载方案，不用安装插件
- 2、利用import语法实现路由按需加载方案,需要安装@babel/plugin-syntax-dynamic-import插件, 执行命令行
npm i @babel/plugin-syntax-dynamic-import --save
npm i babel-plugin-component --save
{
path: '/product/:id',
name: 'product',
/*利用Promise语法实现路由按需加载方案，不用安装插件
component: resolve => require(['./pages/product.vue'],resolve),
*/
//利用import语法实现路由按需加载方案,需要安装babel/plugin-syntax-dynamic-import插件
component: () => import('./pages/product.vue')
}
element-ui
安装：
npm i element-ui --save
引入：
局部插件使用
import { Message } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
全局插件的使用
Vue.use(Message)
Vue.prototype.$message = Message
滚动加载
安装：
npm i vue-infinite-scroll --save
导入：
import infiniteScroll from 'vue-infinite-scroll'
配置：
export default {
directives: {
infiniteScroll
}
}
使用：
<div class="scroll-more"
v-infinite-scroll="scrollMore" //回调函数
infinite-scroll-disabled="true" //由变量busy决定是否执行回调函数
infinite-scroll-distance="410" //页面滚动到离页尾多少像素时触发回调函数
v-if="false">
<img src="/imgs/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">
</div>
//回调函数示例
scrollMore(){
this.busy = true;
setTimeout(() => {
this.pageNum++;
this.getList();
}, 500);
},
// 专门给scrollMore使用
getList(){
this.loading = true;
this.axios.get('/orders',{
params:{
pageSize:10,
pageNum:this.pageNum
}
}).then((res)=>{
this.list = this.list.concat(res.list);
this.loading = false;
if(res.hasNextPage){
this.busy=false;
}else{
this.busy=true;
}
});
}
better-scroll 移动端页面滚动插件
此插件对语法有结构的要求
附官网链接：ustbhuangyi.github.io/better-scro…
安装：
npm i better-scroll --save
引入：
import Bscroll from 'better-scroll'
执行：
mounted(){ //DOM挂载完毕后执行
this.scroll = new Bscroll(this.$refs.wrapper)
}
城市列表搜索逻辑
父组件ajax --> 父子传值 --> 子组件接收 --> 遍历 --> 查找
示例：
data () {
return {
keyword: '',
list: [],
timer: null
}
}
watch: {
keyword () {
if (this.timer) {
clearTimeout(this.timer)
}
if (!this.keyword) {
this.list = []
return
}
this.timer = setTimeout(() => {
const result = []
for (let i in this.cities) {
this.cities[i].forEach((value) => {
if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
result.push(value)
}
})
}
this.list = result
}, 100)
}
}
keep-alive
vue自带的抽象组件,用于把组件缓存进内存中,避免重复渲染 优点是不会生成DOM元素
App.vue -->
<keep-alive>
<router-view /> //包裹
</keep-alive>
ref和$refs
-
1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
-
2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
示例：
<input type="text" ref="input1"/>
console.log(this.$refs.input1)
//结果：
<input type="text" />
图片的懒加载
v-lazyload，是性能优化的范畴
目的是：
提升首屏加载的速度，提升用户体验，减少带宽，滚动到相应位置才进行加载，避免首次加载过多图片，只加载可视窗口图片 npm lazyload官网，有使用语法
下载依赖
npm install vue-lazyload --save
导入
main.js import VueLazyLoad from 'vue-lazyload'
加载
Vue.use(VueLazyLoad,{
loading:'/imgs/loading-svg/loading-bars.svg' //加载时的图片
})
使用
v-lazy="变量名" || v-lazy="'string'"
v-lazy指令
- 1、 v-lazy指令懒加载 双引号中储存的是字符串，需要用单引号再次引起来
<img v-lazy="'/imgs/nav-img/nav-3-4.jpg'" alt />
- 2、v-lazy指令懒加载 双引号中储存的是变量名
<img v-lazy="item.img" alt />
