Html 嵌套Vue Swiper初始化问题处理

最新推荐文章于 2024-11-05 13:44:23 发布

小小鑫吖~

最新推荐文章于 2024-11-05 13:44:23 发布

阅读量711

点赞数 2

文章标签： vue.js vue html5

本文链接：https://blog.csdn.net/threeGold_li/article/details/125485032

版权

一、Html初始化方法

Html部分：

<div class="swiper">....</div>

Js部分：

var swiper1 = new Swiper('.swiper');

1）、如果是初始化多个Swiper需要添加Id进行区分

Html部分：

<div class="swiper" id="swiper1">....</div>
<div class="swiper" id="swiper2">....</div>
<div class="swiper" id="swiper3">....</div>

Js部分：

var swiper1 = new Swiper('#swiper1');
var swiper2 = new Swiper('#swiper2');
var swiper3 = new Swiper('#swiper3');

2）、如果是需要调用接口的话可以在ajax或aiox调用接口执行成功后再callBack方法中进行初始化方法

3）、如果Swiper过早初始化造成Swiper无法使用，可以添加下面属性解决

observer: true,//解决swiper初始化时dom元素还没有加载完成造成的不能轮播
observeParents: true,//解决swiper初始化时dom元素还没有加载完成造成的不能轮播

二、Html嵌套Vue初始化方法

Html：

<!--banner 图片显示-->
        <div class="planBanner" v-if="planData.contentJson.media!=null">
          <div class="swiper-container" id="planBanner">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item,key) in planData.contentJson.media">
                  <img
                    :src="planData.mediaUrlPrefix+item.uri"
                    alt=""
                  />
                </div>
              </div>
            <div class="swiper-pagination"></div>
          </div>
        </div>

Vue.Js：

swiperInit:function (){
    // 调起Banner
    var bannerSwiper = new Swiper('#planBanner', {
       loop: true,
       autoplay: true,//可选选项，自动滑动
       speed:3000,//切换时间ms
       observer: true,//修改swiper自己或子元素时，自动初始化swiper
       observeParents: true,//修改swiper的父元素时，自动初始化swiper
       pagination: "#planBanner .swiper-pagination"
    });
    return false;
}

Html嵌套Vue的话会出现初始化不成功的问题，如果我们是静态页面的话则可以直接使用下面的方法进行初始化。如果我们是动态页面需要调用接口的话，接口调用成功后在callBack方法里面进行调用初始化。

this.$nextTick(function () {
  this.$options.methods.swiperInit()
})