小程序轮播图遍历图片的方法

秋绥冬禧.

已于 2023-11-14 16:48:43 修改

阅读量785

点赞数 1

文章标签：小程序

于 2023-04-13 10:19:18 首次发布

本文链接：https://blog.csdn.net/m0_61663332/article/details/130123552

版权

文章介绍了在uniapp中创建轮播图的三种方法：直接使用静态图片，遍历数组中的图片路径，以及通过调用接口动态获取图片数据并渲染。每种方法都涉及到组件属性如autoplay和indicator-dots的设置。

摘要由CSDN通过智能技术生成

uniapp轮播图组件

方法一：直接使用图片

<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>

方法二：遍历数组中的图片

<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']
  }
},

方法三：调接口拿图片渲染

<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
  },
}