vue-awesome-swiper实现轮播图以及数组截取(主要用来处理后端返回的数组不是前端想要的)

<div style="height: 1135px">
  <swiper
                v-if="dataList.length >= 1"
                :options="swiperOption"
                ref="mySwiper"
                style="height: 1135px"
              >
                <swiper-slide v-for="(item, index) in dataList" :key="index">
                  <div class="content-item" v-for="(it, i) in item" :key="i">
                    <h3>{{ it.orgName }}</h3>
                    <p>{{ it.msg }}</p>
                  </div>
                </swiper-slide>
  </swiper> 
</div>

options是用来设置一些轮播图的配置 dataList是截取完以后的数组

import { swiper, swiperSlide } from "vue-awesome-swiper";

components:{
swiper, swiperSlide
}
data(){
    return {
        swiperOption: {
        autoplay: true,
        direction: "vertical",
        loop: true,
        simulateTouch: false,
        speed: 10000, //滑动速度
        freeMode: true,
      },
    }
}

computed:{
   swiper() {
      return this.$refs.mySwiper.$swiper;
    },
}

watch: {
    carouselList: {
      immediate: true,
      async handler(value) {
        for (let i = 0; i <= value.length; i += 10) {
          const concat = value.slice(i, i + 10);
          if (concat.length != 0) {
            this.dataList.push(concat);
          }
        }
        await this.$nextTick();
      },
    },
  },

watch中是对数组进行截取,然后添加到上边用到的那个数组里

.content-item {
  margin: 24px;
  height: 80px;
}
.content-item p {
  color: #979797;
  font-size: 16px;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
}