接口返回数据后，将其渲染到swiper上，但样式没发生改变

 

var swiper = new Swiper("#swiper1", {
    slidesPerView: 3,
    observer:true,
    observeParents:true,
    grid: {
        rows: 2,
    },
    spaceBetween: 30,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

1. observer:true,//修改swiper自己或子元素时，自动初始化swiper

2. observeParents:true,//修改swiper的父元素时，自动初始化swiper   加上这两个属性就可以了

 

swiper中 :slidesPerView 绑定与 grid 布局冲突。

报错解释：

在使用Swiper库创建滑块视图时，:slidesPerView 是一个Swiper的属性，用于控制同一时间在视图中可见的滑块数量。如果你在Swiper的配置中同时使用了 :slidesPerView 和 grid 布局（即grid 参数），可能会发现它们的行为不一致或出现冲突。这是因为 slidesPerView 属性设计上是针对传统的滑块排列方式，而 grid 布局则用于网格布局的场景。

解决方法：

1. 如果你需要使用网格布局，应当使用Swiper提供的相关网格布局参数，如 slidesPerColumn 或 slidesPerColumnFill，而不是 :slidesPerView。

2. 如果你需要在网格布局中控制可见的滑块数量，可能需要调整 slidesPerColumn 的值，以及相关的尺寸设置，来达到你想要的效果。

3. 确保Swiper的版本与你的使用场景相兼容，有时新版本可能增加了对特定场景的支持。

示例代码：

 

// 使用Swiper的grid选项来设置网格布局
const swiper = new Swiper('.swiper-container', {
  // 设置Swiper为网格布局
  grid: {
    // 设置每列显示的滑块数量
    slidesPerColumn: 2,
    // 设置列高是否需要填满容器（可选）
    slidesPerColumnFill: 'row',
  },
  // 其他Swiper配置...
});

在调整配置时，请根据Swiper的文档和你的具体需求来适当调整参数。