<!-- 轮播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()
}
})
}
}
swiper.js Bscroll 轮播的相关教程结束。
