You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<template> <view class="carousel"> <swiper :circular="true" :autoplay="false" :interval="3000"> <swiper-item> <navigator url="/pages/index/index" hover-class="none" class="navigator"> <image mode="aspectFill" class="image" src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg" ></image> </navigator> </swiper-item> <swiper-item> <navigator url="/pages/index/index" hover-class="none" class="navigator"> <image mode="aspectFill" class="image" src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_2.jpg" ></image> </navigator> </swiper-item> <swiper-item> <navigator url="/pages/index/index" hover-class="none" class="navigator"> <image mode="aspectFill" class="image" src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_3.jpg" ></image> </navigator> </swiper-item> </swiper> <!-- 指示点 --> <view class="indicator"> <text v-for="(item, index) in 3" :key="item" class="dot" :class="{ active: index === activeIndex }" ></text> </view> </view> </template>
<script setup lang="ts"> import { ref } from 'vue'
const activeIndex = ref(0) </script>
<style lang="scss"> /* 轮播图 */ .carousel { height: 280rpx; position: relative; overflow: hidden; transform: translateY(0); background-color: #efefef; .indicator { position: absolute; left: 0; right: 0; bottom: 16rpx; display: flex; justify-content: center; .dot { width: 30rpx; height: 6rpx; margin: 0 8rpx; border-radius: 6rpx; background-color: rgba(255, 255, 255, 0.4); } .active { background-color: #fff; } } .navigator, .image { width: 100%; height: 100%; } } </style>
|