swiper.js Bscroll 轮播

 <!-- 轮播banner图 -->
          <div class="banner">
            <div class="swiper-container" id="swiper-banner">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in bannerList" :key="index + Math.random()" @click="showToast(item)">
                  <img :src="item.imgUrl" alt="">
                </div>
              </div>
              <div class="swiper-pagination"></div>
            </div>
          </div>




Bscroll.js
  <div class="content-box">
              <div ref="tab" class="tab">
                <ul ref="tabWrapper" class="tab_content">
                  <li v-for="(item, index) in activityList"  :key="index + Math.random()" class="item activity" @click="jumpToActivity(item)">
                    <img :src="item.imgUrl" alt="">
                  </li>
                </ul>
              </div>
            </div>

　　

import Swiper from 'swiper'
import BScroll from 'better-scroll'
import 'swiper/css/swiper.css'

　　

    

 mounted () {
    this.$nextTick(() => {
      this.bannerSwiper = new Swiper('#swiper-banner', {
        observer: true,
        observeParents: true,
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false
        },
        pagination: {
          el: '.swiper-pagination'
        }
      })
    })
    this.$nextTick(() => {
      this._initTabScroll()
    })
  },

methods: {
    _initTabScroll () {
      const width = 0.24 + 0.24 + 3.14 * this.activityList.length + 0.14 * (this.activityList.length - 1)
      this.$refs.tabWrapper.style.width = width + 'rem'
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.tab, {
            startX: 0,
            click: true,
            scrollX: true,
            scrollY: false,
            eventPassthrough: 'vertical'
          })
        } else {
          this.scroll.refresh()
        }
      })
    }
 }