uniapp首页轮播图

实现UniApp首页轮播图的方法

在UniApp中实现首页轮播图，可以使用<swiper>组件。以下是一个完整的实现方案：

模板部分代码

<template>
  <view>
    <swiper 
      :indicator-dots="true" 
      :autoplay="true" 
      :interval="3000" 
      :duration="500"
      circular
    >
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <image :src="item.image" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

脚本部分代码

<script>
export default {
  data() {
    return {
      swiperList: [
        {image: '/static/banner1.jpg'},
        {image: '/static/banner2.jpg'},
        {image: '/static/banner3.jpg'}
      ]
    }
  }
}
</script>

样式部分代码

<style>
swiper {
  width: 100%;
  height: 350rpx;
}
swiper image {
  width: 100%;
  height: 100%;
}
</style>

关键属性说明

indicator-dots：显示面板指示点 autoplay：自动切换 interval：自动切换时间间隔（毫秒） duration：滑动动画时长（毫秒） circular：是否采用衔接滑动

高级功能实现

实现点击轮播图跳转功能：

methods: {
  swiperClick(index) {
    uni.navigateTo({
      url: this.swiperList[index].link
    })
  }
}

需要在模板中添加：

<swiper-item @click="swiperClick(index)">

注意事项

图片需要放在项目的static目录下 建议使用rpx单位确保多端适配 可根据实际需求调整swiper高度 网络图片需要配置合法域名