미니 프로그램 캐러셀에서 사진을 이동하는 방법

uniapp 캐러셀 구성 요소

 방법 1: 이미지 직접 사용

<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
  <swiper-item>
    <image src="/static/swiper_img/swiper1.png"></image>
  </swiper-item>
  <swiper-item>
    <image src="/static/swiper_img/swiper2.png"></image>
  </swiper-item>
  <swiper-item>
    <image src="/static/swiper_img/swiper3.png"></image>
  </swiper-item>
</swiper>

방법 2: 배열의 그림 탐색

<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
    <swiper-item v-for="(item ,i) in imgUrls" :key="i">
      <image :src="item"></image>
    </swiper-item>
</swiper>


data() {
  return {
    imgUrls: ['/static/swiper_img/swiper1.png', '/static/swiper_img/swiper2.png', '/static/swiper_img/swiper3.png']
  }
},

방법 3: 인터페이스를 조정하여 이미지 렌더링

<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
  <swiper-item v-for="(item, i) in swiperList" :key="i">
      <image :src="item.image_src"></image>
  </swiper-item>
</swiper>


data() {
  return {
    swiperList: []
  };
},
onLoad() {
  this.getSwiperList()
},


methods: {
  async getSwiperList() {
    const { data: res } = await uni.$http.get('/api/.../swiperdata')
    if (res.meta.status !== 200) return uni.$showMsg()
    this.swiperList = res.message
  },
}