vue+jquery 跳转后,页面排版错位

先上两图。中间的大图和右边的几个图组是jquery做的slide
图1

正常页面是这样的,但是,从另一个页面点击链接跳转过来后就变为了下面这样了。刷新一下又好了,只是跳转过来后都会出现排版错位的情况。

图2


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();
})

页面排版错乱后,控制台中并没有任何报错。

阅读 2.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进