el-carousel 懒加载
懒加载原理
- 在刚开始的时候我们把图片地址赋给img标签一个自定义属性例如data-src,src属性留空。
- 设置一个定时器定时检测出现在视图内的图片,并将其data-src属性的值赋值给src属性。
setInterval(lazyload,1000);
var imgs = document.getElementsByTagName("img");
function lazyload(){
var scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
for(var i=0,len=imgs.length;i<len;i++){
var x = scrollTop + viewportSize - imgs[i].offsetTop;
if(x>0){imgs[i].src = imgs[i].getAttribute("loadpic");}
}
}
lazyload 脚本分析
var imgs = document.getElementsByTagName("img");
var scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
setInterval(lazyload,1000);
npm install vue-lazyload
教程指路–>
json 元数据共用
[{
"label": "共青团",
"url": "index/youthTeam",
"isMain": true
},
{
"label": "公告",
"url": "/index/youthTeam/youthNotice",
"isChecked": false
},
{
"label": "团刊",
"url": "/index/youthTeam/YouthPublication",
"isChecked": false
},
{
"label": "青年大讲堂",
"url": "/index/youthTeam/LectureHall",
"isChecked": false
},
{
"label": "活动信息",
"url": "/index/youthTeam/ActivityMsg",
"isChecked": false
}
]
created() {
this.youthData = youth.slice(1);
},
富文本ql-editor
<div class="inner-content">
<div class="ql-editor" v-html="detailData.cDbnr"></div>
</div>
js 添加css动画监听事件
const elementBtn = document.querySelector('.show-btn')
const elementSty = document.querySelector('.studying')
let that = this
function handler() {
that.showStudy = true
elementSty.classList.add('animated', 'fadeIn')
elementBtn.removeEventListener('animationend', handler, false)
}
elementBtn.addEventListener('animationend', handler, false)
vue-router
- query传参相当于get方式,会把要传递的参数显示在导航栏中。
- params传参相当于post方式。默认不会把传递的参数显示在导航栏中。
this.$router.push({
name: 'jobdetail',
params: { nSjid: data.nSjid }
})
if (!this.$route.params.nSjid) {
this.$router.go(-1)
return
}
this.initJobDetail(this.$route.params.nSjid)
{
path: 'job/jobdetail/:nSjid',
component: JobDetail,
name: 'jobdetail'
}
this.$router.push({
path: '/index/construct/reportingdetail',
query: {
id
}
})
this.breadData.unshift({
"label": "共青团",
"url": "index/youthTeam",
isMain: true
})
jumpDetail(id) {
this.$router.push({
name: 'NoticeDdetail',
params: { id }
})
},
if (!this.$route.params.id) {
this.$router.go(-1)
return
}