4.首页轮播图

轮播图

轮播图组件
https://uniapp.dcloud.net.cn/component/swiper.html
uni-app的内置组件

setup () 是vue3新增加的组件。vue3采用了组合式 API ，为了使用组合式API，我们需要一个入口，在vue3组件中，称之为setup。
(简单点来说，就是vue2里面的data，method，computed···全不要啦，所有数据方法全写在setup里)
可参考博文：
https://blog.csdn.net/u013505589/article/details/122718376

本次只修改了index.vue中的代码
代码如下所示:

<template>
  <view class="u-wrap">
    <!-- 这是uview内置样式 -->
    <!-- 轮播图 -->
    <swiper class="swiper-container" circular :indicatorColor="indicatorColor" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
      :duration="duration">
      <swiper-item v-for="(item,index) in swipperList">
        <image class="imgs" :src="item.image"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
  // setup script就是vue3新出的一个语法糖，使用方法就是在书写script标签的时候在其后面加上一个setup修饰。
  import {
    ref
  } from 'vue';
  //引入ref
  const indicatorDots = ref(true)
  //默认值设为true  显示面板指示点
  const indicatorColor = ref("#FFF")
  //指示点颜色
  const autoplay = ref(true)
  //是否自动切换
  const interval = ref(2000)
  //自动切换时间
  const duration = ref(600)
  //滑动动画时长

  // 轮播图数据
  const swipperList = ref([{
    image: '/static/lbt1.jpg'
  }, {
    image: '/static/lbt2.jpg'
  }, {
    image: '/static/lbt3.jpg'
  }])
  
</script>

<style lang='scss'>
  /* 在 .vue 文件中指定 <style> 标签的语言为 scss */
  .swiper-container {
    height: 180px;

    .item {
      height: 180px;
    }
    .imgs{
      width: 100%;
      height: 180px;
    }
  }
</style>

效果图