colexiu-project/src/components/banner/index.tsx

import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
import classes from './index.module.less'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import request from '@/helpers/request'
export default defineComponent({
  name: 'tagItem',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  setup(props, conent) {
    const state = reactive({
      title: props.title,
      modules: [Navigation, Pagination, Scrollbar, A11y],
      bannerList:[]
    })
    const onSwiper = swiper => {
      // console.log(swiper)
    }
    const onSlideChange = () => {
      console.log('slide change')
    }
    const getBannerList = async () => {
      try {
        const res = await request.get('/api-website/open/banner/list', {
          data: {

          }
        })

        state.bannerList = res.data
      } catch (e) {
        console.log(e)
      }
    }
      onMounted(()=>{
        getBannerList()
      })
    return () => (
      <>
        <swiper
          modules={state.modules}
          class={classes.mySwiper}
          slides-per-view={1}
          space-between={50}
          pagination={{ clickable: true }}
          navigation={{
            nextEl: '.myprev',
            prevEl: '.mynext'
          }}
          loop={true}
          onSwiper={onSwiper}
          onSlideChange={onSlideChange}
        >
          {
          state.bannerList.map((item:any)=>{
            return <swiper-slide><img src={item.coverImage} alt="" /></swiper-slide>
          })
        }



          <div class="myprev"></div>
          <div class="mynext"></div>
        </swiper>
      </>
    )
  }
})