美文网首页
swiper echarts 点击tab切换swiper解决第一

swiper echarts 点击tab切换swiper解决第一

作者: 倩仔6 | 来源:发表于2021-04-26 10:48 被阅读0次
    第一张不显示的问题在于 swiper 的loop属性如果true则下标打印到navList.length+1张 
    最简单的方法是loop:false;
    

    版本:
    "swiper": "3.4.1",
    "vue-awesome-swiper": "^3.1.3",
    加载tab

      <ul class="nav">
                <li
                  v-for="(item, index) in navList"
                  :key="index"
                  class="itemNav"
                  :class="{ active: index == activeIndex }"
                  @click="menuShow(index)"
                >
                  {{ item }}
                </li>
              </ul>
    

    ·

      <div class="swiper_box">
                <swiper
                  ref="mySwiper"
                  :options="swiperOption"
                  v-if="navList.length > 1"
                >
                  <swiper-slide
                    class="swiper-wrapper"
                    v-for="(item, index) in navList"
                    :key="index"
                  >
                 <!--    <div v-if="index == 0" class="navswiper">
                      <swiper-one
                        :Dian1="DianList"
                        v-if="DianList.length > 0"
                      ></swiper-one>
                    </div>  -->
                      ···
     </swiper-slide>
     </swiper>
    
    
    import { swiper, swiperSlide } from "vue-awesome-swiper";
    import "swiper/dist/css/swiper.css";
    export default {
      data() {
        return {
          navList: [
            // 各楼宇电,各楼宇水,自来水用量,天然气,蒸汽,餐厅流量
            "1",
            "2",
            "3",
            "4",
            "5",
            "6"
          ],
          
          activeIndex: 0,
          // 轮播图
          swiperOption: {
            observeParents: true,
            pagination: ".swiper-pagination",
            paginationClickable: true, //分页可点击
            slidesPerView: 1, //每次滑动图片一张
            slidesPerGroup: 1, //每个div只有一张图片
            loop: false, //false 不循环    true循环
            // grabCursor: true, //鼠标光标
            fadeEffect: {
              crossFade: true
            },
            autoplay: {
              delay: 2000, //秒
              stopOnLastSlide: false,
              disableOnInteraction: false //滑动不会失效
            }
          },
    },
     components: {
       swiper,
        swiperSlide
      },
      computed: {
        swiper() {
          return this.$refs.mySwiper.swiper;
        }
      },
      mounted() {
        let _this = this; //轮播
    
        this.swiper.on("slideChangeTransitionStart", function() {
          if (this.activeIndex == _this.navList.length + 1) {
            _this.activeIndex = 1;
          } else {
            _this.activeIndex = this.activeIndex;
          }
        });
      },
     methods: {
        menuShow(index) {
          console.log("click", index);
          this.swiper.slideTo(index);
        },}

    相关文章

      网友评论

          本文标题:swiper echarts 点击tab切换swiper解决第一

          本文链接:https://www.haomeiwen.com/subject/tbwsrltx.html