先上两图。中间的大图和右边的几个图组是jquery
做的slide
正常页面是这样的,但是,从另一个页面点击链接跳转过来后就变为了下面这样了。刷新一下又好了,只是跳转过来后都会出现排版错位的情况。
CSS和JS文件是直接在写在index.html
的
<html>
<head>
...
<link rel="stylesheet" type="text/css" href="xxx1.css" />
<link rel="stylesheet" type="text/css" href="xxx2.css" />
...
</head>
<body>
...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slide.js"></script>
<script type="text/javascript" src="script.js"></script>
...
</body>
</html>
下面是slide的部分代码
这是slide组件
<template>
<div class="block-slider">
<ul class="home-slider kt-bxslider">
<li><img :src="`${baseUrl}images/slide1.png`" alt="Slider"></li>
<li><img :src="`${baseUrl}images/slide1.png`" alt="Slider"></li>
</ul>
</div>
</template>
<script>
export default {
name: "HomeSlide",
data () {
return {
baseUrl: process.env.BASE_URL
}
}
}
</script>
这是index.html
中引入script.js
的部分代码
function kt_bxslider(){
$('.kt-bxslider').each(function(){
var slider = $(this).bxSlider(
{
nextText:'<i class="fa fa-angle-right"></i>',
prevText:'<i class="fa fa-angle-left"></i>',
auto: true
}
);
slider.reloadSlider();
})
}
$(document).ready(function() {
kt_bxslider();
})
页面排版错乱后,控制台中并没有任何报错。