解决办法:
外层div添加class为wrapper
.wrapper{
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: 32.5%;//其中32.5%为图片的宽高比
}
//或者方案2(部分浏览器不兼容)
.wrapper{
width: 100%;
height: 32.5vw; //其中vw相当于视口宽度的百分比
}
解决办法:
使用’>>>'对样式进行穿透
解决方案:
需要在flex:1的当前样式中添加min-width:0;
.flex{
flex: 1;
min-width:0; //解决超出不出现省略问题
}
.flex .flex-child{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
说明:vue-cli创建的项目只有static文件夹下的文件才可以被外部访问,故mock的数据是放在static文件夹下
请求如下:
当前组件
config文件夹下index.js配置文件
//假设本地static/mock文件夹下有index.json文件
dev: {
porxyTable: {
'/api': {
target: 'http://localhost:8080', //服务器地址
pathRewrite: {
'^/pai': '/static/mock' //本地静态mock文件地址
}
}
}
}
切记:修改配置文件需重启服务
页面
- 内容1
- 内容2
- 内容3
- 内容4
better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
传送门
说明:当touchmove事件或者滚动事件一直在执行,并且立即执行某些方法时非常消耗性能。优化原理是通过setTimeout延迟一定时间再执行,以减少执行次数,时间可设置16ms
例如缓存路由请求的数据
其中有两个参数
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
注意:当使用keep-alive时会多出生命周期钩子activated、deactivated。使用会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务。也就是说加上keep-alive再次访问页面时不会触发mounted但是会触发activated钩子函数
例如
**问题重现:**当组件中对window监听事件时,当前组件能触发事件,离开当前页面也还会触发该window事件
例如:
此处通过keep-alive的另一个生命钩子deactivated函数解除对window事件的监听,从而解决被其他组件调用的问题
解决办法:
在main.js中创建router时使用scrollBehavior方法,代码如下
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/index'
const router = new VueRouter({
router,
mode: routerMode, //路由的模式
scrollBehavior (to, from, savedPosition) {
//回到最顶部
return { x: 0, y: 0}
}
})
同样可以根据此方法实现在后退时回到之前的滚动的位置的
代码如下:
//savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
同样也可以用此方法滚动到锚点位置
代码如下:
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
scrollBehavior具体用法传送门