vue-awesome-swiper怎么响应式布局

Question

怎么根据页面宽度显现slidesPerView

Answer 1

在vue-awesome-swipervv官网拉到最下面有这么一句话：
Swiper's API and configuration can be used.（Swiper官网中的API及配置均可使用）
swiper文档有这么一个例子
width: undefined,//取消width，恢复自适应
这样应该可以解决你的问题

<script> 
var mySwiper = new Swiper('.swiper-container',{
  //设置固定宽度，隐藏时初始化swiper
    width: 800, 
  //设置宽度为全屏  
    width: window.innerWidth,
  //设置断点宽度
    breakpoints: {
        1024: {
          width: 500,
        },
        768: {
          width: undefined,//取消width，恢复自适应
    },
  //窗口缩放时设置width
    on: {
       resize: function(){
         this.params.width = window.innerWidth;
         this.update();
       },
    } ,
})



/*隐藏状态显示后再初始化swiper
function initSwiper(){
  var mySwiper = new Swiper ('.swiper-container', {
    ...
  }
}
$(".page").css('display','block');
setTimeout('initSwiper()', 100);
*/
</script>