用Better Scroll打造极酷炫的Vue轮播图组件！

前端

2023-09-07 08:53:07

前言

我们上一篇博客用better-scroll实现了移动端纵向滚动的演示，这次我们继续利用它实现一个横向滚动——轮播图组件，让你的网页更加动感迷人。

效果预览

这是我们用better-scroll实现的轮播图效果演示：
[轮播图效果预览]

功能特性

这个轮播图组件实现了以下功能：

基于异步请求到的图片数据进行轮播图展示。
可控制是否自动播放，是否循环播放，以及自动播放间隔。
提示当前播放页。

实现步骤

接下来我们一步步带你实现这个轮播图组件：

引入better-scroll

import BScroll from 'better-scroll'

初始化better-scroll实例

const scroll = new BScroll('.container', {
  scrollX: true,
  click: true
})

异步请求图片数据

async function getImages() {
  const res = await fetch('https://picsum.photos/v2/list?page=1&limit=10')
  const data = await res.json()
  return data
}

渲染轮播图

const images = await getImages()

images.forEach((image, index) => {
  const div = document.createElement('div')
  div.classList.add('image-item')
  div.style.backgroundImage = `url(${image.download_url})`

  scroll.scroller.appendChild(div)
})

控制自动播放

let autoplay = false
let timer

function startAutoplay() {
  autoplay = true
  timer = setInterval(() => {
    scroll.next()
  }, 2000)
}

function stopAutoplay() {
  autoplay = false
  clearInterval(timer)
}