vue swiper组件 页面缩小slide宽度样式改变

<swiper
  v-if="newsList.length"
  :options="swiperOption"
  class="swiper-container-news"
  ref="mySwiper"
>
  <swiper-slide>
    <ul>
      <li
        v-for="item in newsList"
        :key="item.id"
        @click="showNews(item.id)"
      >
        <span>{{ item.start_time }}</span>
        <b></b>
        <p>{{ item.title }}</p>
      </li>
    </ul>
  </swiper-slide>
  <swiper-slide>
   ...
  </swiper-slide>
  <swiper-slide>
    ...
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

 swiperOption: {
   observer: true,
   slidesPerView: "auto",
   centeredSlides: true,
   notNextTick:true,
   // spaceBetween: 10,
   // loop: true,
   speed: 600,
   // 显示分页
   pagination: {
     el: ".swiper-pagination",
     clickable: true, //允许分页点击跳转
   },
   on: {
   //监听页面窗口变化 ---------------重要代码！
     resize: () => {
       setTimeout(() => {
         let swiper = this.$refs.mySwiper.$swiper;
         //更新Swiper，相当于初始化
         swiper.update();
       }, 500);//延时器很重要，不加可能会出错
     },
   },
 },