首页

接下来我们就进行首页的开发

🍓 首页功能

• 轮播图

<view class="imgbanner">
  <swiper class="swiper-cont" circular :indicator-dots="indicatorDots" :autoplay="false" indicator-color="#fff"
    indicator-active-color="#3187DC" :interval="interval" :duration="duration">
    <swiper-item v-for="(val,index) in bannerList" :key="val.id" @click="handleBanner(val)">
      <view class="swiper-item">
        <img :src="val.thumbnail" alt="" class="imgbanner">
      </view>
    </swiper-item>
  </swiper>
</view>

// 完善样式部分
/* 轮播图 */
.imgbanner {
	width: 690rpx;
	height: 340rpx;
}
.swiper-cont {
	height: 300rpx;
}
.swiper-item {
	display: block;
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
}
<script setup>
const bannerList=ref([{
  id: 1,
    thumbnail: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
  },
  {
    id: 2,
    thumbnail: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
  },
  {
    id: 3,
    thumbnail: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
  },
  {
    id: 4,
    thumbnail: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
  },
])
</script>

最后我们效果如下