【若依前后端分离+app】第七篇--app页面首页添加动态轮播图

首页文件路径：pages/work/index.vue

1. Vue 组件的模板部分

包括创建模板、视图容器、视图、轮播图组件以及相关的属性和事件监听器。

以下部分为轮播图代码：

<template>
  <view class="work-container">
    <view>
      <!-- 轮播图 -->
      <uni-swiper-dot class="uni-swiper-dot-box" :info="images" :current="current" field="content">
        <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
          <swiper-item v-for="(item, index) in images" :key="index">
            <view class="swiper-item" @click="clickBannerItem(item)">
              <!--aspectFit 长边可以完全展示，宽截取  aspectFill短边完全展示 长截取   heightFix高不变，宽自动变化   widthFix宽不变，高自动变化-->
              <image :src="item.image" mode="aspectFill" :draggable="false" style="width: 500px; height: 200px; opacity: 1; position: fixed;"/>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>

    </view>
  </view>
</template>

2.  JavaScript 部分

包含了组件的逻辑和数据处理，包括定义数据、钩子函数、方法以及实现轮播图切换的逻辑。

以下部分为轮播图代码：

export default {
  // 导出默认的对象
  data() {
    // 定义 data 函数，返回对象，用于存储组件的数据
    return {
      // 返回一个对象，包含当前轮播图的索引、轮播图指示点的索引以及图片数组
      current: 0, // 当前轮播图的索引
      swiperDotIndex: 0, // 轮播图指示点的索引
      images: [ // 图片数组
        {
          image: '/static/images/banner/banner01.png' // 图片路径
        },
        {
          image: '/static/images/banner/banner02.png' // 图片路径
        },
        {
          image: '/static/images/banner/banner03.png' // 图片路径
        },
        {
          image: '/static/images/banner/banner04.png' // 图片路径
        }
      ]
    }
  },
  // 在组件被挂载后调用
  mounted() {
    // 执行 mounted 钩子函数，通常用于初始化数据或进行异步操作
    this.playNextImage(); // 调用 playNextImage 方法开始轮播图片
  },
  methods: { // 定义组件的方法
    playNextImage(){ // 定义 playNextImage 方法
      setInterval(() => { // 使用 setInterval 函数，每隔一定时间执行一次函数
        this.current = (this.current + 1) % this.images.length; // 更新当前轮播图索引，循环切换图片
        this.swiperDotIndex=this.current; // 更新轮播图指示点的索引，与当前轮播图保持一致
      }, 5000); // 设置间隔时间为 5000 毫秒（5 秒）
    },
    changeSwiper(e) { // 定义 changeSwiper 方法，用于处理轮播图变化事件
      this.current = e.detail.current; // 更新当前轮播图索引为事件中的当前索引
      this.swiperDotIndex=this.current; // 更新轮播图指示点的索引，与当前轮播图保持一致
    }  
  }
}

图片存放位置：